react-hot-toast

react-hot-toast is a lightweight (< 5kb) and accessible notification library for React. Key features include:

• Hot by default: Beautiful styles out of the box.
• Easily Customizable: Highly configurable components.
• Promise API: Automatic loading states derived from promises.
• Headless Hooks: Use useToaster() to build your own custom notification logic and UI.

You can customize the colors of toast icons by providing an iconTheme object containing primary and secondary color keys within the toastOptions for a specific type.

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

Use the gutter prop on the Toaster component to control the spacing (offset) between multiple stacked notifications.

<Toaster gutter={24} />

To adjust the distance of notifications from the edges of the window or change the toaster's positioning (e.g., from fixed to relative), use the containerStyle prop on the Toaster component.

// To change offset from edges
<Toaster
  containerStyle={{
    top: 20,
    left: 20,
    bottom: 20,
    right: 20,
  }}
/>

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

Call toast() to create a notification from anywhere in your application, including outside React components.

Prerequisite: You must add the <Toaster /> component to your app before calling toast().

Each toast call returns a unique id which can be used to dismiss or update the toast later.

Within the toastOptions prop of the Toaster component, you can define specific style configurations for different toast types such as success or error.

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

Use the toastOptions prop on the Toaster component to apply styles to every notification globally. You can provide a className or a style object.

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

To use react-hot-toast, you must include the <Toaster /> component in your application's component tree to render the notifications. You can then trigger toasts from anywhere in your app using the toast() function.

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

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

To use react-hot-toast, you must first add the <Toaster /> component to your application. The <Toaster /> component handles the rendering of all notifications. Once the <Toaster /> is mounted, you can trigger notifications using the toast() function from anywhere in your component tree.

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

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

You can install react-hot-toast using either pnpm or npm depending on your preferred package manager.

pnpm add react-hot-toast
# OR
npm install react-hot-toast