GitHub

Styling

You can style your notifications globally with the toastOptions inside the Toaster component, or for each notification manually.

Set default for all toasts

<Toaster
toastOptions={{
className: '',
style: {
border: '1px solid #713200',
padding: '16px',
color: '#713200',
},
}}
/>

Set default for specific types

<Toaster
toastOptions={{
success: {
style: {
background: 'green',
},
},
error: {
style: {
background: 'red',
},
},
warn: {
style: {
background: 'yellow',
},
},
info: {
style: {
background: 'blue',
},
},
}}
/>

Style per toast

toast('I have a border.', {
style: {
border: '1px solid black',
},
});

Change the offset

If you want to change the offset of your notifications, you can adapt the absolute position in containerStyle.

<Toaster
containerStyle={{
top: 20,
left: 20,
bottom: 20,
right: 20,
}}
/>

Change position of the toaster

By default, the toaster is position fixed in the window. If you want to place it somewhere else, you can overwrite the position with containerStyle.

<Toaster
containerStyle={{
position: 'relative',
}}
/>

Change offset between toasts

If you want to change the offset between notifications, change the gutter.

<Toaster gutter={24} />

Change icon color

All icon colors can be changed by supplying an iconTheme with a primary & secondary color.

<Toaster
toastOptions={{
success: {
iconTheme: {
primary: 'green',
secondary: 'black',
},
},
}}
/>

Change enter and exit animations

In this example, we provide a render function with the default <ToastBar />. We overwrite the animation style based on the current state.

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