Quick Start

Provider

Add the toast provider to a top-level position in your app.

import {
  ToastProvider, // Provider
  SlideShrinkToastRoot, // Toast shell (animates transitions)
  GlossyToastContent, // Inner content (icons, buttons, text, color)
} from 'react-cooked-bread'
 
const MyApp = () => (
  <ToastProvider toastRoot={SlideShrinkToastRoot} toastContent={GlossyToastContent}>
    <Example />
  </ToastProvider>
)

Toasts

Consumers, such as the hook, must be descendants of the provider.

import { useToasts } from 'react-cooked-bread'
 
const Example = () => {
  const { addToast } = useToasts()
 
  const handleClick = async () => {
    addToast('Wow!', {
      type: 'success',
      autoDismiss: true,
    })
  }
 
  return <button onClick={handleClick}>Run</button>
}