If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

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.

getToastId(properties)

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

Kind: global function

Param Type Default Description
properties Object   A composite identifier object with properties that identify a specific toast using its ToastProps.
properties.type String   Maps to the type property of ToastProps
properties.message String   Maps to the message property of ToastProps
properties.dismissable Boolean true Maps to the dismissable property of ToastProps
properties.actionText String '' Maps to the actionText property of ToastProps
properties.icon React.Element ()=>{} Maps to the icon property of ToastProps

useToasts() ⇒ Array.<Object>

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

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

ToastProps

Object containing data for creating toasts using addToast.

Kind: global typedef
Properties

Name Type Description
type String One of the following toast types: ‘info’, ‘warning’, or ‘error’
message String The message to display on the toast
[dismissable] Bool Indicates 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.Element The icon element to display. This property is optional when creating toasts.
[onDismiss] function Callback invoked when a user clicks the dismiss icon. This property is optional when creating toasts.
[actionText] String Text to display as a call to action. This property is optional when creating toasts.
[onAction] function Callback invoked when a user clicks the action text. This property is optional when creating toasts.
[timeout] Number Time, 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.

API : Object

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

Kind: global typedef

API.removeToast(id)

Removes a toast from the toast store.

Kind: static method of API

Param Type Description
id Number The id of the toast to remove

API.addToast(toastProps) ⇒ Number

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

Kind: static method of API
Returns: Number - id The key referencing the toast in the store

Param Type Description
toastProps ToastProps The object containing props for adding a toast.

For implementation details View Source.

Examples

Adding a toast

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

If an onAction() or onDismiss() callback is provided, the implementer must call the passed in remove() function. If the onDismiss() callback is not provided, the toast is removed immediately.

const { toasterState, api }  = useToast(); 
const { addToast } = api;

addToast({
  type: 'error',
  message: 'An error occurred!',
  actionText: 'Retry',
  onAction: remove => {
    async attemptRetry();
    remove();
  },
  onDismiss: remove => {
    async doSomethingOnDismiss();
    remove();
  },
  icon: <Icon src={SadFaceIcon} />
});

See also: ToastContainer