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.


Name Type Description
props props React component props

Props for ToastContainer


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


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