Provider

The ToastProvider controls the pop-up overlay, some common settings, and the state for our toasts. Add the toast provider to a top-level position in your app. All consumers must be descendants of the provider.

import { DefaultToastRoot, DefaultToastContent } from 'react-cooked-bread'

const App = () => (
  <ToastProvider
    toastRoot={DefaultToastRoot} // Required
    toastContent={DefaultToastContent} // Recommended, unless you customize `DefaultToastRoot`
  >
    {/* ... */}
  </ToastProvider>
)

You can choose to either use default components we've created (and more components to choose from soon!) or you can add your own.

You must pass a component to toastRoot and you should provide a component to toastContent.

We give you the responsibility to add the components to the provider. This way, if you prefer custom components, you don't have to include unused code.

Remember, the provider should wrap any components that need to consume or create toasts.

Props

Prop descriptions

Property	Type	Default	Description	Required
`toastRoot`	Node		Toast wrapper, this animates transitions with `React-Transition-Group`	✔
`toastContent`	Node		Inner toast content, includes icons, close button, text and colors	*
`container`	Node	`ToastContainer`	Wrapper component that places the toasts fixed in the viewport
`autoDismiss`	boolean	`false`	A global default whether new toasts should dismiss by a timer (`addToast` may override)
`timeout`	number	`5000`	A global default for how long a toast with `autoDismiss` should persist in milliseconds
`maxToasts`	number		The maximum number of toasts that should be in the queue at a given time, new toasts push old toasts out when this value is set
`placement`	Placement	`bottom-right`	Where in the viewport the container should place the toasts
`transitionDuration`	TransitionDuration	`{appear: 200, exit: 200}`	Transition timeout object or number for `React-Transition-Group` transition element
`reverseColumn`	boolean	`false`	Reverses the toast item flex column container, typically good for when toasts are placed at the bottom
`pauseAllOnHover`	boolean	`false`	If all toasts should pause when mouse moves over any of the toasts
`pauseOnFocusLoss`	boolean	`false`	If all toasts should pause when browser window loses focus, is minimized or the user switches to another tab
`containerStyles`	Styler	container CSS	Override styles for container element
`transitionGroupStyles`	Styler	transition group CSS	Override styles for `TransitionGroup` wrapper
`toastRootStyles`	Styler	toast root CSS	Override styles for toast React Transition Group animation
`toastContentStyles`	Styler	toast content CSS	Override styles for toast elements

*Not required, but strongly recommended

Placement

bottom-left, bottom-center, bottom-right, top-left, top-center, top-right

Stylers

See how to use a styler. With stylers, you can either pass in a style object or a function to dynamically change the styles based on the component state.

TypeScript

interface ToastProviderValueProps {
  toastRoot: ComponentType<ToastRootProps>
  toastContent?: ComponentType<ToastContentProps>
  container?: React.ComponentType<ContainerProps>
  containerStyles?: ContainerStyler
  transitionGroupStyles?: TransitionGroupStyler
  toastRootStyles?: ToastRootStyler
  toastContentStyles?: ToastContentStyles
  autoDismiss?: boolean
  timeout?: number
  placement?: PlacementOption
  transitionDuration?: TransitionDuration
  pauseAllOnHover?: boolean
  reverseColumn?: boolean
  pauseOnFocusLoss?: boolean
  maxToasts?: number
}

Edit this page on GitHub