ToastContainer | Magento PWA Documentation

Typedefs

props: Props for [ToastContainer](#ToastContainer)

A container for toast notifications.

This component must be a child, nested or otherwise, of a ToastContextProvider component.

**Returns: ** React.Element — A React component that displays toast notification data.

Parameters

Name	Type	Description
props	`props`	React component props

Props for ToastContainer

Properties

Name	Type	Description
classes	`Object`	An object containing the class names for the ToastContainer and its Toast components
classes.root	`String`	CSS classes for the root container

Source Code: pwa-studio/packages/venia-ui/lib/components/ToastContainer/toastContainer.js

Example

Using ToastContainer

Use the ToastContextProvider component to provide the ToastContainer with toast data. Since the ToastContainer consumes the context provided by the ToastContextProvider, it can be nested within other components that are wrapped by ToastContextProvider.

import { ToastContextProvider } from '@magento/peregrine';
import  ToastContainer  from '@magento/venia-ui/lib/components/ToastContainer'

import MyToastCreator from './MyToastCreator'

const Toaster = (props)=>{

  return (
    <ToastContextProvider>
      <ToastContainer />
      <MyToastCreator />  // A component which adds a toast using actions.
    </ToastContextProvider>
  )

}

export default Toaster;