@paprika/toast

@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