@leafygreen-ui/toast
v7.0.5
Published
leafyGreen UI Kit Toast
Downloads
270,575
Keywords
Readme
Toast
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/toast
NPM
npm install @leafygreen-ui/toast
Example
import Button from '@leafygreen-ui/button';
import { ToastProvider, useToast, Variant } from '@leafygreen-ui/toast';
const { pushToast, clearStack, getStack, updateToast } = useToast();
const stack = getStack();
const createToast = () => {
pushToast({
title: 'Toast Title',
description: 'Toast Description',
variant: Variant.Success,
timeout: null,
});
};
return (
<ToastProvider>
<Button onClick={createToast}>Create toast</Button>
</ToastProvider>
);
Properties, useToast
useToast is a React hook that enables a consumer to interact with a Toast stack. It may only be used inside of a <ToastProvider />
. The hook takes no arguments and returns the following functions:
| Name | Signature |
| ----------- | ------------------------------------------------------------------------ |
| pushToast | (payload: ToastProps) => ToastId
|
| popToast | (payload: ToastId) => ToastProps \| undefined
|
| updateToast | (id: ToastId, props: Partial<ToastProps>, ) => ToastProps \| undefined
|
| getToast | (id: ToastId) => ToastProps \| undefined
|
| getStack | () => ToastStack \|undefined
|
| clearStack | () => void
|
Properties, ToastProvider
| Prop | Type | Default | Description |
| --------------- | ------------------------- | ------- | ----------------------------------------------------- |
| initialValue | Map<ToastId, ToastProps>; | | The initial toasts in the stack. |
| portalClassName | string
| | Class name applied to the containing Portal component |
Properties, Controlled Toast
| Prop | Type | Default | Description |
| ---------------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actionElement | React.ReactNode
| | Optional action button, or other element. Only rendered if variant === 'progress'
. This should be a shortcut only—and not the only way to perform the action. The provided action element should have an aria-description
attribute that describes how to alternatively perform the action. |
| darkMode | boolean
| false
| Renders the component with dark mode styles. |
| description | React.ReactNode
| | Additional body text |
| dismissible | boolean
| true
| Determines whether to render the close button. If timeout === null
, then dismissible
is forced to true
. |
| onClose | (event: ToastCloseEvent) => void
| | Fired either when the close button is clicked, or when timeout has elapsed. When triggered by button click, event.type === "click"
. When triggered by timeout, event.type === "timeout"
. |
| open required | boolean
| | Required boolean that renders the Toast and makes it visible when true. Note: open is not a valid prop when rendering toasts programmatically |
| progress | number
| | Optional number between 0 and 1 that sets the progress bar's progress. Note: the progress bar is only rendered when the Toast variant is set to 'progress'
. |
| timeout | number \| null
| 6000
| Dismiss the Toast after timeout
milliseconds. If timeout is null
or 0
, the Toast will never dismiss automatically. Notes: when variant="progress"
, timeout
timer will not start until progress is complete.timeout
timer will be paused when a user is interacting with a Toast. |
| title required | React.ReactNode
| | Primary text for the toast |
| variant | 'success' 'note' 'warning' 'progress' 'important'
| note
| Required style variant to render the Toast as. |