Edit in GitHubLog an issue

useToastContext()

Typedefs

ToastState : Object

The current state of the toast store.

ToastContextProvider

A context provider that provides the toast state object and a dispatch function to toast functionality consumers.

useToastContextArray.<Object>

A hook that provides access to the toast state and dispatch. Any component using this hook must be a child of a ToastContextProvider.

The current state of the toast store.

Properties

NameTypeDescription
toastsMapMap object associating an id to toast data

A context provider that provides the toast state object and a dispatch function to toast functionality consumers.

A hook that provides access to the toast state and dispatch. Any component using this hook must be a child of a ToastContextProvider.

Returns: Array.<Object> — An array containing the state and dispatch function: [ToastState, function]

Example

Copied to your clipboard
const [toastState, dispatch] = useToastState();

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

Examples#

Using the Toast context logic#

Import the ToastContextProvider and wrap it around components that use Toast data and functionality.

Copied to your clipboard
1// MyComponent.js
2
3import {ToastContextProvider} from '@magento/peregrine'
4import {ToastContainer, AddToastComponent} from './MyToastComponents'
5
6...
7
8const MyComponent = () =>{
9
10 return (
11 <ToastContextProvider>
12 <ToastContainer /> // A component which would display based on state.
13 <AddToastComponent /> // A component which adds a toast using actions.
14 </ToastContextProvider>
15 )
16}
17
18...

Call useToastContext() to get the current state of the toast store and a dispatch function.

Copied to your clipboard
1// MyToastComponents.js
2
3import { useToastContext } from "@magnto/peregrine";
4
5export const ToastContainer = () => {
6 const [toastState, toastDispatch] = useToastContext();
7
8 const toastData = toastState.map((toast) => {
9 // Do something with the toast data
10 });
11
12 return <div>{toastData}</div>;
13};
14
15export const AddToastComponent = () => {
16 return;
17 <div>
18 // Some component that allows you to add toast data using the //
19 toastDispatch() function or useToast() hook
20 </div>;
21};
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.