Skip to content



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 = () => (
    toastRoot={DefaultToastRoot} // Required
    toastContent={DefaultToastContent} // Recommended, unless you customize `DefaultToastRoot`
    {/* ... */}

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.


Prop descriptions

toastRootNodeToast wrapper, this animates transitions with React-Transition-Group
toastContentNodeInner toast content, includes icons, close button, text and colors*
containerNodeToastContainerWrapper component that places the toasts fixed in the viewport
autoDismissbooleanfalseA global default whether new toasts should dismiss by a timer (addToast may override)
timeoutnumber5000A global default for how long a toast with autoDismiss should persist in milliseconds
maxToastsnumberThe 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
placementPlacementbottom-rightWhere in the viewport the container should place the toasts
transitionDurationTransitionDuration{appear: 200, exit: 200}Transition timeout object or number for React-Transition-Group transition element
reverseColumnbooleanfalseReverses the toast item flex column container, typically good for when toasts are placed at the bottom
pauseAllOnHoverbooleanfalseIf all toasts should pause when mouse moves over any of the toasts
pauseOnFocusLossbooleanfalseIf all toasts should pause when browser window loses focus, is minimized or the user switches to another tab
containerStylesStylercontainer CSSOverride styles for container element
transitionGroupStylesStylertransition group CSSOverride styles for TransitionGroup wrapper
toastRootStylesStylertoast root CSSOverride styles for toast React Transition Group animation
toastContentStylesStylertoast content CSSOverride styles for toast elements
*Not required, but strongly recommended


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


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.


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