@leafygreen-ui/toast
leafyGreen UI Kit Toast
Last updated 2 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/toast 
SYNC missed versions from official npm registry.

Toast (Beta)

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/toast

NPM

npm install @leafygreen-ui/toast

Example

import Toast from '@leafygreen-ui/toast';

const [toastOpen, setToastOpen] = useState(true);

return (
  <Toast
    variant="success"
    title="This is a title"
    body="This is a description"
    open={toastOpen}
    close={() => setToastOpen(false)}
  />
);

Output HTML

<div role="status" aria-live="polite" aria-atomic="true" aria-relevant="all">
  <div class="leafygreen-ui-r1u4g0">
    <div class="leafygreen-ui-1lymiei">
      <svg
        class="leafygreen-ui-1b4llpu"
        height="30"
        width="30"
        aria-hidden="true"
        viewBox="0 0 16 16"
        role="img"
      >
        <title>Checkmark With Circle Icon</title>
        <g
          id="Glyphs-/-Checkmark-With-Circle"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path d="..." fill="currentColor"></path>
        </g>
      </svg>

      <div>
        <p class="leafygreen-ui-d2tjkm">This is a title</p>
        <p class="leafygreen-ui-10eu8wb">This is a description</p>
      </div>
    </div>

    <button
      tabindex="0"
      aria-disabled="false"
      aria-label="Close Message"
      class="leafygreen-ui-ptvv4q"
    >
      <div class="leafygreen-ui-xhlipt">
        <svg class="" height="16" width="16" viewBox="0 0 16 16" role="img">
          <g
            id="X-Copy"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <path
              d="..."
              fill="currentColor"
              transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
            ></path>
          </g>
        </svg>
      </div>
    </button>
  </div>
</div>

Properties

Prop Type Description Default
title ReactNode Optional text shown in bold above the body text.
body (Required) ReactNode Main text for the Toast.
className string Optional className passed to the wrapping <div /> for the toast.
variant (Required) 'success', 'note', 'warning', 'important', 'progress' Style variant to render the Toast as.
progress number (0...1) Optional number between 0 and 1 that sets the progress bar's progress. Note that the progress bar is only rendered when the Toast variant is set to 'progress'. 1
open boolean Optional boolean that renders the Toast and makes it visible when true. false
close function (MouseEventHandler) Optional click event handler that, when set, renders a close button that receives the passed handler.

Current Tags

  • 0.4.0                                ...           latest (2 days ago)

11 Versions

  • 0.4.0                                ...           2 days ago
  • 0.3.0                                ...           a month ago
  • 0.2.2                                ...           3 months ago
  • 0.2.1                                ...           3 months ago
  • 0.2.0                                ...           3 months ago
  • 0.1.5                                ...           4 months ago
  • 0.1.4                                ...           4 months ago
  • 0.1.3                                ...           4 months ago
  • 0.1.2                                ...           4 months ago
  • 0.1.1                                ...           4 months ago
  • 0.1.0                                ...           5 months ago
Downloads
Today 42
This Week 48
This Month 48
Last Day 0
Last Week 0
Last Month 9
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |