GitHub

<ToastBar/> API

This is the default toast component rendered by the Toaster. You can use this component in a Toaster with a custom render function to overwrite its defaults.

Available options

<ToastBar
toast={t}
style={{}} // Overwrite styles
position="top-center" // Used to adapt the animation
/>

Add custom content

You can add a render function to the ToastBar to modify its content. An object containing The icon as well as the message are passed into the function.

Add a dismiss button

In this example we add a basic dismiss button to all toasts, except if the loading one.

import { toast, Toaster, ToastBar } from 'react-hot-toast-magic';
<Toaster>
{(t) => (
<ToastBar toast={t}>
{({ icon, message }) => (
<>
{icon}
{message}
{t.type !== 'loading' && (
<button onClick={() => toast.dismiss(t.id)}>X</button>
)}
</>
)}
</ToastBar>
)}
</Toaster>;