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

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.

ToastState : Object

The current state of the toast store.

Kind: global typedef
Properties

Name Type Description
toasts Map Map object associating an id to toast data

ToastContextProvider

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

Kind: global typedef

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.

Kind: global typedef
Returns: Array.<Object> - An array containing the state and dispatch function: [ToastState, function]
Example

const [toastState, dispatch] = useToastState();

For implementation details View Source.

Examples

Using the Toast context logic

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

// 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.

// 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>
  )
}