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




Props for ToastContainer

ToastContainer ⇒ React.Element

A container for toast notifications.

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

Kind: global functional component
Returns: React.Element - A React component that displays toast notification data.

Param Type Description
props props React component props


Props for ToastContainer

Kind: global typedef

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

For implementation details View Source.


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 (
      <ToastContainer />
      <MyToastCreator />  // A component which adds a toast using actions.


export default Toaster;

See also: ToastContextProvider