Edit in GitHubLog an issue

useToasts()

Functions

getToastId(properties)

Generates an identifier for a toast by inspecting the properties that differentiate toasts from one another.

useToasts()Array.<Object>

A hook that provides access to the toast state and toast api.

Typedefs

ToastProps

Object containing data for creating toasts using addToast.

API : Object

The API for managing toasts. Use this API to add and remove toasts.

Generates an identifier for a toast by inspecting the properties that differentiate toasts from one another.

Parameters

NameTypeDefaultDescription
propertiesObjectA composite identifier object with properties that identify a specific toast using its ToastProps.
properties.typeStringMaps to the type property of ToastProps
properties.messageStringMaps to the message property of ToastProps
properties.dismissableBooleantrueMaps to the dismissable property of ToastProps
properties.actionTextString''Maps to the actionText property of ToastProps
properties.iconReact.Element()=>{}Maps to the icon property of ToastProps

A hook that provides access to the toast state and toast api.

Returns: Array.<Object> — An array containing objects for the toast state and its API: [ToastState, API]

Object containing data for creating toasts using addToast.

Properties

NameTypeDescription
typeStringOne of the following toast types: 'info', 'warning', or 'error'
messageStringThe message to display on the toast
[dismissable]BoolIndicates whether the toast is dismissable. If onDismiss is provided, this property is assumed to be true. This property is optional when creating toasts.
[icon]React.ElementThe icon element to display. This property is optional when creating toasts.
[onDismiss]functionCallback invoked when a user clicks the dismiss icon. This property is optional when creating toasts.
[actionText]StringText to display as a call to action. This property is optional when creating toasts.
[hasDismissAction]BoolIndicates whether the toast should have a dismiss action with the same behavior as the dismiss icon. This property is optional when creating toasts.
[dismissActionText]StringText to display as a call to dissmisAction. This property is optional when creating toasts.
[onAction]functionCallback invoked when a user clicks the action text. This property is optional when creating toasts.
[timeout]NumberTime, in ms, before the toast is automatically dismissed. If 0 or false is passed, the toast will not timeout. This property is optional when creating toasts.

The API for managing toasts. Use this API to add and remove toasts.

Removes a toast from the toast store.

Parameters

NameTypeDescription
idNumberThe id of the toast to remove

Dispatches an add action. Includes all props passed along with a hash id and a timeout id generated based on the incoming props.

Returns: Number — id The key referencing the toast in the store

Parameters

NameTypeDescription
toastPropsToastPropsThe object containing props for adding a toast.

Source Code: pwa-studio/packages/peregrine/lib/Toasts/useToasts.js

Examples#

Adding a toast#

Use the addToast() function from the API to add a toast to the toast store.

Copied to your clipboard
1const { toasterState, api } = useToast();
2const { addToast } = api;
3
4addToast({
5 type: 'error',
6 message: 'An error occurred!',
7 actionText: 'Retry',
8 onAction: remove => {
9 async attemptRetry();
10 remove();
11 },
12 onDismiss: remove => {
13 async doSomethingOnDismiss();
14 remove();
15 },
16 icon: <Icon src={SadFaceIcon} />
17});
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.