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.

useToastContext ⇒ Array.<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

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

Copy
const [toastState, dispatch] = useToastState();
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.

Copy
// MyComponent.js

import {ToastContextProvider} from '@magento/peregrine'
import {ToastContainer, AddToastComponent} from './MyToastComponents'

...

const MyComponent = () =>{

  return (
  <ToastContextProvider>
    <ToastContainer /> // A component which would display based on state.
    <AddToastComponent /> // A component which adds a toast using actions.
  </ToastContextProvider>
  )
}

...
Copied to your clipboard
// MyComponent.js

import {ToastContextProvider} from '@magento/peregrine'
import {ToastContainer, AddToastComponent} from './MyToastComponents'

...

const MyComponent = () =>{

  return (
  <ToastContextProvider>
    <ToastContainer /> // A component which would display based on state.
    <AddToastComponent /> // A component which adds a toast using actions.
  </ToastContextProvider>
  )
}

...

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

Copy
// MyToastComponents.js

import { useToastContext } from "@magnto/peregrine";

export const ToastContainer = () => {
  const [toastState, toastDispatch] = useToastContext();

  const toastData = toastState.map((toast) => {
    // Do something with the toast data
  });

  return <div>{toastData}</div>;
};

export const AddToastComponent = () => {
  return;
  <div>
    // Some component that allows you to add toast data using the //
    toastDispatch() function or useToast() hook
  </div>;
};
Copied to your clipboard
// MyToastComponents.js

import { useToastContext } from "@magnto/peregrine";

export const ToastContainer = () => {
  const [toastState, toastDispatch] = useToastContext();

  const toastData = toastState.map((toast) => {
    // Do something with the toast data
  });

  return <div>{toastData}</div>;
};

export const AddToastComponent = () => {
  return;
  <div>
    // Some component that allows you to add toast data using the //
    toastDispatch() function or useToast() hook
  </div>;
};

Last updated 9/13/2023

Was this helpful?

Yes

No