GitHub

<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.

| Positions | | | | ----------- | ------------- | ------------ | | top-left | top-center | top-right | | bottom-left | bottom-center | bottom-right |

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: {} 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.