@paprika/toast

Description

Toast component is a controlled or uncontrolled component that provides a easy way to commmunicate to users regarding success, warning, info, and error messages.

Installation

yarn add @paprika/toast

or with npm:

npm install @paprika/toast

Props

Toast

| Prop | Type | required | default | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoCloseDelay | number | false | 5000 | Duration (in ms) before Toast will automatically close (if canAutoClose is true). | | canAutoClose | bool | false | false | Will automatically call onClose() after 5000ms (or longer if provided by autoCloseDelay). If uncontrolled, it will automatically close the Toast as well. | | children | node | false | null | Content of the Toast. | | hasCloseButton | bool | false | true | If the component should have a 'close' button. | | isOpen | bool | false | undefined | How "controlled" Toast is shown / hidden. | | isFixed | bool | false | false | If the Toast is fixed to the top of the viewport. This will render the Toast as a Portal. | | isPolite | bool | false | false | A11y: If the Toast is polite (will wait until screen reader is finished before speaking) or assertive (will interrupt immediately). | | kind | [ Toast.types.kind.SUCCESS, Toast.types.kind.WARNING, Toast.types.kind.ERROR, Toast.types.kind.INFO, Toast.types.kind.LOCKED, Toast.types.kind.VISUALLY_HIDDEN] | false | Toast.types.kind.INFO | Determines the styling of the Toast. | | onClose | func | false | () => {} | Callback that is executed after clicking the 'close' button. | | renderDelay | number | false | 20 | Delay in ms before content of Toast is rendered (to improve UX with screen readers). | | zIndex | number | false | null | The z-index of the Toast. |

Usage

Please use <L10n /> component to wrap <Toast /> in your application.

Example:

import Toast from "@paprika/toast";
import L10n from "@paprika/l10n";

<L10n locale="en">
  <Toast>Notification</Toast>;
</L10n>;

Note: An uncontrolled Toast is expected to be displayed and opened once, if the desired behavior is to display the Toast more than once, an alternative method is to reset the Toast by updating its key or use a controlled Toast component instead.

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG