<Toaster /> API

This component will render all toasts. Alternatively you can create own renderer with the headless useToaster() hook.

Available options

<Toaster
  position="top-center"
  reverseOrder={false}
  gutter={8}
  containerClassName=""
  containerStyle={{}}
  toastOptions={{
    // Define default options
    className: '',
    duration: 5000,
    style: {
      background: '#363636',
      color: '#fff',
    },

    // Default options for specific types
    success: {
      duration: 3000,
      theme: {
        primary: 'green',
        secondary: 'black',
      },
    },
  }}
/>

position Prop

You can change the position of all toasts by modifying supplying positon prop.

reverseOrder Prop

Toasts spawn at top by default. Set to true if you want new toasts at the end.

containerClassName Prop

Add a custom CSS class name to toaster div. Defaults to undefined.

containerStyle Prop

Customize the style of toaster div. This can be used to change the offset of all toasts

gutter Prop

Changes the gap between each toast. Defaults to 8.

toastOptions Prop

These will act as default options for all toasts. See toast() for all available options.

Type specific options

You can change the defaults for a specific type by adding, success: {}, error: {}, loading: {}, warn: {}, info: {} or custom: {}.

Using a custom render function

You can provide your own render function to the Toaster by passing it as children. It will be called for each Toast allowing you to render any component based on the toast state.

Minimal example

import { Toaster, resolveValue } from 'react-hot-toast';

// In your app
<Toaster>
  {(t) => (
    <div
      style={{ opacity: t.visible ? 1 : 0, background: 'white', padding: 8 }}
    >
      {resolveValue(t.message, t)}
    </div>
  )}
</Toaster>;

resolveValue() is needed to resolve all message types: Text, JSX or a function that resolves to JSX.

Adapting the default <ToastBar/>

You can use this API to modify the default ToastBar as well. In this example we overwrite the animation style based on the current state.

import { Toaster, ToastBar } from 'react-hot-toast';

<Toaster>
  {(t) => (
    <ToastBar
      toast={t}
      style={{
        ...t.style,
        animation: t.visible ? 'custom-enter 1s ease' : 'custom-exit 1s ease',
      }}
    />
  )}
</Toaster>;

Check out the <ToastBar/> docs for more options.