React Hot Toast

https://react-hot-toast.com/docs
Admin
React Hot Toast is a library for adding beautiful, customizable, and accessible toast notifications...
Tokens:12,618
Snippets:119
Trust Score:8.2
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install react-hot-toast with pnpm

Source: https://react-hot-toast.com/docs

Use this command to add react-hot-toast to your project if you are using pnpm.

```bash
pnpm add react-hot-toast
```

--------------------------------

### Install react-hot-toast with NPM

Source: https://react-hot-toast.com/docs

Use this command to add react-hot-toast to your project if you are using NPM.

```bash
npm install react-hot-toast
```

--------------------------------

### Animated Implementation

Source: https://react-hot-toast.com/docs/use-toaster

An example showcasing how to implement smooth toast animations using the `useToaster` hook. It utilizes all toasts, including hidden ones, to manage transitions and opacity based on the `toast.visible` property.

```APIDOC
## Animated Implementation

This example uses all `toasts` (including hidden ones) to enable smooth animations. The `toast.visible` property controls opacity, while the 1-second removal delay provides time for exit animations.

### Example
```javascript
import { useToaster } from 'react-hot-toast/headless';

const AnimatedNotifications = () => {
  const { toasts, handlers } = useToaster();
  const { startPause, endPause, calculateOffset, updateHeight } = handlers;

  return (
    <div
      style={{
        position: 'fixed',
        top: 8,
        left: 8,
      }}
      onMouseEnter={startPause}
      onMouseLeave={endPause}
    >
      {toasts.map((toast) => {
        const offset = calculateOffset(toast, {
          reverseOrder: false,
          gutter: 8,
        });

        const ref = (el) => {
          if (el && typeof toast.height !== 'number') {
            const height = el.getBoundingClientRect().height;
            updateHeight(toast.id, height);
          }
        };

        return (
          <div
            key={toast.id}
            ref={ref}
            style={{
              position: 'absolute',
              width: '200px',
              background: 'papayawhip',
              transition: 'all 0.5s ease-out',
              opacity: toast.visible ? 1 : 0,
              transform: `translateY(${offset}px)`,
            }}
            {...toast.ariaProps}
          >
            {toast.message}
          </div>
        );
      })}
    </div>
  );
};
```
```

--------------------------------

### Adapting the default `<ToastBar/>`

Source: https://react-hot-toast.com/docs/toaster

You can use the custom render function API to modify the default ToastBar as well, for example, to overwrite animation styles based on the current state.

```APIDOC
### 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.

```jsx
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 forwards',
      }}
    />
  )}
</Toaster>;
```

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

--------------------------------

### Access Toaster State with useToasterStore

Source: https://react-hot-toast.com/docs/use-toaster-store

Import and use the useToasterStore hook to get the current list of toasts and the pausedAt timestamp. This hook is suitable when you need to read the toaster state without the built-in pausing or notification handling logic.

```javascript
import { useToasterStore } from 'react-hot-toast';


const { toasts, pausedAt } = useToasterStore();
```

--------------------------------

### Loading Toast

Source: https://react-hot-toast.com/docs/toast

Displays a notification with a loading indicator. This is typically used to signify ongoing processes. It's often updated or replaced later, for example, using `toast.promise()`.

```javascript
toast.loading('Waiting...');
```

--------------------------------

### Basic Usage of react-hot-toast

Source: https://react-hot-toast.com/docs

Demonstrates how to import and use the toast function and Toaster component to display a simple notification.

```jsx
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>
  );
};

```

--------------------------------

### Basic Toast Implementation with useToaster

Source: https://react-hot-toast.com/docs/use-toaster

A basic implementation of a custom toaster UI using the useToaster hook. It displays visible toasts and pauses timers on hover.

```javascript
import toast, { useToaster } from 'react-hot-toast/headless';


const Notifications = () => {
  const { toasts, handlers } = useToaster();
  const { startPause, endPause } = handlers;


  return (
    <div onMouseEnter={startPause} onMouseLeave={endPause}>
      {toasts
        .filter((toast) => toast.visible)
        .map((toast) => (
          <div key={toast.id} {...toast.ariaProps}>
            {toast.message}
          </div>
        ))}
    </div>
  );
};


// Create toasts from anywhere
toa st('Hello World');
```

--------------------------------

### Import useToaster from Headless Entry Point

Source: https://react-hot-toast.com/docs/use-toaster

Import the useToaster hook from the headless entry point to exclude UI components. This is useful when building a completely custom toaster UI.

```javascript
import { useToaster } from 'react-hot-toast/headless';
```

--------------------------------

### Multiple Toasters

Source: https://react-hot-toast.com/docs/use-toaster

Demonstrates how to create and manage multiple independent toaster instances by providing a unique `toasterId` to the `useToaster` hook.

```APIDOC
## Multiple Toasters

Create multiple independent toaster instances by providing a unique `toasterId`.

### Example
```javascript
import toast, { useToaster } from 'react-hot-toast';

// Create a toaster instance for the sidebar
const sidebar = useToaster({ duration: 5000 }, 'sidebar');

// Show a toast associated with the sidebar toaster
tost('Sidebar notification', { toasterId: 'sidebar' });
```
```

--------------------------------

### Loading Toast

Source: https://react-hot-toast.com/docs/toast

Creates a toast notification that indicates a process is currently loading.

```APIDOC
## toast.loading()

### Description
Creates a toast notification with a loading indicator. This is typically used to show that an asynchronous operation is in progress.

### Method
`toast.loading(message, options?)`

### Parameters
#### Message
- **message** (string) - The text content of the loading toast.

#### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults to `Infinity` for loading toasts, meaning it will not disappear automatically.
- **position** (string) - The position of the toast on the screen.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal.
- **toasterId** (string) - The ID of the toaster instance to use.

### Request Example
```javascript
const toastId = toast.loading('Waiting...');
```

### Response
Returns a unique `toastId` that can be used to update or dismiss the loading toast.
```

--------------------------------

### Basic Toast with Options

Source: https://react-hot-toast.com/docs/toast

Call `toast()` to create a notification from anywhere. Provide options as the second argument to customize duration, position, styling, icons, and ARIA properties. Ensure the `<Toaster/>` component is added to your app first.

```javascript
toast('Hello World', {
  duration: 4000,
  position: 'top-center',


  // Styling
  style: {},
  className: '',


  // Custom Icon
  icon: '👏',


  // Change colors of success/error/loading icon
  iconTheme: {
    primary: '#000',
    secondary: '#fff',
  },


  // Aria
  ariaProps: {
    role: 'status',
    'aria-live': 'polite',
  },


  // Additional Configuration
  removeDelay: 1000,


  // Toaster instance
  toasterId: 'default',
});
```

--------------------------------

### Animated Toast Implementation with useToaster

Source: https://react-hot-toast.com/docs/use-toaster

An animated implementation that utilizes all toasts, including hidden ones, for smooth entry and exit animations. It manages opacity and uses a removal delay for exit transitions.

```javascript
import { useToaster } from 'react-hot-toast/headless';


const AnimatedNotifications = () => {
  const { toasts, handlers } = useToaster();
  const { startPause, endPause, calculateOffset, updateHeight } = handlers;


  return (
    <div
      style={{
        position: 'fixed',
        top: 8,
        left: 8,
      }}
      onMouseEnter={startPause}
      onMouseLeave={endPause}
    >
      {toasts.map((toast) => {
        const offset = calculateOffset(toast, {
          reverseOrder: false,
          gutter: 8,
        });


        const ref = (el) => {
          if (el && typeof toast.height !== 'number') {
            const height = el.getBoundingClientRect().height;
            updateHeight(toast.id, height);
          }
        };


        return (
          <div
            key={toast.id}
            ref={ref}
            style={{
              position: 'absolute',
              width: '200px',
              background: 'papayawhip',
              transition: 'all 0.5s ease-out',
              opacity: toast.visible ? 1 : 0,
              transform: `translateY(${offset}px)`,
            }}
            {...toast.ariaProps}
          >
            {toast.message}
          </div>
        );
      })}
    </div>
  );
};

```

--------------------------------

### Basic Toast

Source: https://react-hot-toast.com/docs/toast

The most basic way to create a toast notification. You can optionally provide an icon and other options.

```APIDOC
## toast()

### Description
Creates a basic toast notification. This is the simplest way to display a message.

### Method
`toast(message, options?)`

### Parameters
#### Message
- **message** (string) - The text content of the toast.

#### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults to 4000ms for blank toasts.
- **position** (string) - The position of the toast on the screen (e.g., 'top-center', 'bottom-right'). Defaults to the value set in `<Toaster/>`.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal. Defaults to 1000ms.
- **toasterId** (string) - The ID of the toaster instance to use. Defaults to 'default'.

### Request Example
```javascript
t oast('Hello World');

t oast('Another message', {
  duration: 5000,
  position: 'bottom-left',
  icon: '👋'
});
```

### Response
Returns a unique `toastId` that can be used to interact with the toast programmatically.
```

--------------------------------

### Toast Options

Source: https://react-hot-toast.com/docs/toast

Details on the available options that can be passed to any toast function to customize its behavior and appearance.

```APIDOC
## Available Toast Options

### Description
When creating a toast, you can provide an optional second argument, `ToastOptions`, to customize its behavior and appearance. These options will override any default settings configured in the `<Toaster/>` component.

### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults vary by toast type (e.g., 4000ms for blank, 2000ms for success, Infinity for loading).
- **position** (string) - The position of the toast on the screen. Common values include 'top-center', 'top-left', 'top-right', 'bottom-center', 'bottom-left', 'bottom-right'. Defaults to the value set in `<Toaster/>`.
- **style** (object) - An object containing CSS properties to style the toast element directly. Example: `{ backgroundColor: 'red', color: 'white' }`.
- **className** (string) - A string of CSS class names to apply to the toast element for custom styling.
- **icon** (string | ReactNode) - A custom icon to display in the toast. Can be an emoji, an SVG, or a React component.
- **iconTheme** (object) - An object to theme the default success, error, or loading icons. It accepts `primary` and `secondary` color values. Example: `{ primary: '#000', secondary: '#fff' }`.
- **ariaProps** (object) - Properties to enhance accessibility for screen readers. Example: `{ role: 'status', 'aria-live': 'polite' }`.
- **removeDelay** (number) - The delay in milliseconds after a toast is dismissed before it is removed from the DOM. This is used to play the exit animation. Defaults to 1000ms.
- **toasterId** (string) - Specifies which `<Toaster/>` instance should render this toast if you have multiple.
- **id** (string) - A unique, permanent ID for the toast. Used to prevent duplicates or to update an existing toast.

### Request Example
```javascript
t oast('Hello World', {
  duration: 4000,
  position: 'top-center',
  style: {
    border: '1px solid #713200',
    padding: '16px',
    color: '#713200',
  },
  className: 'my-custom-toast',
  icon: '👋',
  iconTheme: {
    primary: '#FF6B6B',
    secondary: '#FFC048',
  },
  ariaProps: {
    role: 'alert',
    'aria-live': 'assertive',
  },
  removeDelay: 500,
  toasterId: 'main-toaster',
  id: 'unique-toast-id'
});
```
```

--------------------------------

### Import useToaster Hook

Source: https://react-hot-toast.com/docs/use-toaster

Import the useToaster hook from the react-hot-toast package. This is the standard way to import the hook for general use.

```javascript
import { useToaster } from 'react-hot-toast';
```

--------------------------------

### Multiple Toaster Instances

Source: https://react-hot-toast.com/docs/use-toaster

Create multiple independent toaster instances by providing a unique toasterId. This allows for distinct toast management contexts.

```javascript
const sidebar = useToaster({ duration: 5000 }, 'sidebar');
ttoast('Sidebar notification', { toasterId: 'sidebar' });
```

--------------------------------

### Configure `<Toaster />` Component

Source: https://react-hot-toast.com/docs/toaster

Configure the `<Toaster />` component with various options like position, reverse order, gutter, container class name, container style, toaster ID, and default toast options including type-specific defaults.

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


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

--------------------------------

### Success Toast

Source: https://react-hot-toast.com/docs/toast

Creates a notification with an animated checkmark icon. This variant is ideal for confirming successful operations. It can be themed using the `iconTheme` option.

```javascript
toast.success('Successfully created!');
```

--------------------------------

### Custom Enter and Exit Animations

Source: https://react-hot-toast.com/docs/styling

Implement custom enter and exit animations for notifications by providing a render function to `Toaster` and overwriting the `animation` style in `ToastBar` based on the toast's visibility state.

```jsx
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 forwards',
      }}
    />
  )}
</Toaster>
```

--------------------------------

### Custom Toast (JSX)

Source: https://react-hot-toast.com/docs/toast

Creates a toast notification using custom JSX content, bypassing default styles.

```APIDOC
## toast.custom()

### Description
Creates a toast notification with custom JSX content. This method does not apply any default styles, giving you full control over the appearance.

### Method
`toast.custom(jsx, options?)`

### Parameters
#### JSX
- **jsx** (ReactNode) - The JSX element to render as the toast content.

#### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults to 4000ms for custom toasts.
- **position** (string) - The position of the toast on the screen.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal.
- **toasterId** (string) - The ID of the toaster instance to use.

### Request Example
```javascript
import React from 'react';

t oast.custom(<div>Hello World</div>);

t oast.custom(<div><p>Custom content</p></div>, {
  duration: 3000,
  style: {
    backgroundColor: 'lightblue',
    color: 'darkblue',
  }
});
```

### Response
Returns a unique `toastId`.
```

--------------------------------

### Dispatch Custom Components with toast.custom()

Source: https://react-hot-toast.com/docs/version-2

Use `toast.custom()` to render any React component as a toast. No default styles are applied, giving you full control over the appearance. This is ideal for integrating custom UI notifications.

```javascript
toast.custom(<div>Minimal Example</div>);
```

```javascript
toast.custom((t) => (
  <div
    className={`bg-white px-6 py-4 shadow-md rounded-full ${t.visible ? 'animate-custom-enter' : 'animate-custom-leave'}`}
  >
    Hello TailwindCSS! 👋
  </div>
));
```

--------------------------------

### Success Toast

Source: https://react-hot-toast.com/docs/toast

Creates a toast notification with a success icon, typically used to confirm an action.

```APIDOC
## toast.success()

### Description
Creates a toast notification with an animated checkmark icon, indicating a successful operation.

### Method
`toast.success(message, options?)`

### Parameters
#### Message
- **message** (string) - The text content of the success toast.

#### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults to 2000ms for success toasts.
- **position** (string) - The position of the toast on the screen.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal.
- **toasterId** (string) - The ID of the toaster instance to use.

### Request Example
```javascript
t oast.success('Successfully created!');
```

### Response
Returns a unique `toastId`.
```

--------------------------------

### Render Custom JSX Content in Toast

Source: https://react-hot-toast.com/docs/toast

Provide a React component directly to the toast function for custom message rendering. Use `toast.custom()` if default styling is not desired.

```javascript
toast(
  <span>
    Custom and <b>bold</b>
  </span>,
  {
    icon: <Icon />,
  }
);
```

--------------------------------

### Promise Toast

Source: https://react-hot-toast.com/docs/toast

A shorthand for displaying toasts that automatically update based on the status of a promise.

```APIDOC
## toast.promise()

### Description
Provides a convenient way to display toast notifications that automatically update based on the resolution or rejection of a promise. It handles loading, success, and error states.

### Method
`toast.promise(promise, messages, options?)`

### Parameters
#### Promise
- **promise** (Promise | Function returning a Promise) - The promise to track.

#### Messages
- **loading** (string | ReactNode) - The message to display while the promise is pending.
- **success** (string | ReactNode | Function) - The message to display when the promise resolves. Can be a function that receives the resolved value.
- **error** (string | ReactNode | Function) - The message to display when the promise rejects. Can be a function that receives the rejection reason.

#### Options
- **duration** (number) - The duration in milliseconds for success/error toasts. Defaults are applied based on toast type.
- **position** (string) - The position of the toast on the screen.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal.
- **toasterId** (string) - The ID of the toaster instance to use.
- **success** (object) - Specific options for the success toast, can override global options.
- **error** (object) - Specific options for the error toast, can override global options.

### Request Example
```javascript
// Simple Usage
const myPromise = fetchData();
t oast.promise(myPromise, {
  loading: 'Loading',
  success: 'Got the data',
  error: 'Error when fetching',
});

// Advanced Usage with result/error functions
t oast.promise(
  async () => {
    const { id } = await fetchData1();
    await fetchData2(id);
  },
  {
    loading: 'Loading',
    success: (data) => `Successfully saved ${data.name}`,
    error: (err) => `This just happened: ${err.toString()}`,
  },
  {
    style: {
      minWidth: '250px',
    },
    success: {
      duration: 5000,
      icon: '🔥',
    },
  }
);
```

### Response
Returns a unique `toastId`.
```

--------------------------------

### Implement Custom Toast Rendering

Source: https://react-hot-toast.com/docs/version-2

Utilize the Custom Renderer API by passing a function to the `<Toaster/>` component. This function receives a `Toast` object and allows you to render custom toast UIs, including custom dismiss buttons or animations.

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


const CustomToaster = () => (
  <Toaster>
    {(t) => (
      <ToastBar toast={t}>
        {({ icon, message }) => (
          <>
            {icon}
            {message}
            {t.type !== 'loading' && (
              <button onClick={() => toast.dismiss(t.id)}>X</button>
            )}
          </>
        )}
      </ToastBar>
    )}
  </Toaster>
);
```

--------------------------------

### Style Individual Toasts

Source: https://react-hot-toast.com/docs/styling

Apply custom styles to a single notification by passing the `style` option directly to the `toast` function. This is useful for unique, one-off styling needs.

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

--------------------------------

### Promise Toast - Using Async Function

Source: https://react-hot-toast.com/docs/toast

Enables the use of an async function that returns a promise directly within `toast.promise()`. The toast will manage the loading, success, and error states based on the promise's lifecycle.

```javascript
toast.promise(
  async () => {
    const { id } = await fetchData1();
    await fetchData2(id);
  },
  {
    loading: 'Loading',
    success: 'Got the data',
    error: 'Error when fetching',
  }
);
```

--------------------------------

### Custom Toast with JSX

Source: https://react-hot-toast.com/docs/toast

Allows creating a custom notification using JSX elements. This method does not apply default styles, providing full control over the toast's appearance.

```javascript
toast.custom(<div>Hello World</div>);
```

--------------------------------

### Toaster Component Configuration

Source: https://react-hot-toast.com/docs/toaster

The `<Toaster />` component renders all toasts. It accepts various props to customize its behavior and appearance.

```APIDOC
## `<Toaster />` API

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

### Available options

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


    // Default options for specific types
    success: {
      duration: 3000,
      iconTheme: {
        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`.

### `toasterId` Prop
You can change the toasterId to have a different toaster instance. Learn more about multiple toasters. Defaults to `"default"`.

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

--------------------------------

### Promise Toast - Simple Usage

Source: https://react-hot-toast.com/docs/toast

A shorthand for mapping a promise to a toast. It automatically updates the notification based on the promise's resolution or rejection. Consider adding `min-width` to toast options to prevent layout shifts.

```javascript
const myPromise = fetchData();

tost.promise(myPromise, {
  loading: 'Loading',
  success: 'Got the data',
  error: 'Error when fetching',
});
```

--------------------------------

### Create a Toaster with a Unique ID

Source: https://react-hot-toast.com/docs/multi-toaster

Use the `toasterId` prop to create a distinct toaster instance. This allows for independent state and configuration management.

```jsx
<Toaster toasterId="sidebar" />
```

```jsx
<Toaster toasterId="area1" />
```

```jsx
<Toaster toasterId="area2" toastOptions={{ ... }} />
```

--------------------------------

### useToasterStore Hook

Source: https://react-hot-toast.com/docs/use-toaster-store

This hook allows you to access the internal state of the toaster, including the list of all toasts and the pause timestamp. It's useful for reading toaster data without needing to manage notification creation or pausing logic.

```APIDOC
## useToasterStore()

### Description
This hook gives you access to the internal toaster state. This is the right choice if you need access to the data without wanting to roll your own toaster. In comparison to `useToaster()` it does not handle pausing or provide handlers for creating your own notification system.

### Usage
```javascript
import { useToasterStore } from 'react-hot-toast';

const { toasts, pausedAt } = useToasterStore();
```

### Returns
- **toasts** (Array): An array containing all current toast objects.
- **pausedAt** (number | null): A timestamp indicating when the toaster was paused, or null if not paused.
```

--------------------------------

### Promise Toast - Advanced Usage

Source: https://react-hot-toast.com/docs/toast

Provides advanced control over promise toast messages, allowing functions to format success or error messages based on promise results. `toastOptions` can be passed to customize individual toast properties like duration and icons.

```javascript
toast.promise(
  myPromise,
  {
    loading: 'Loading',
    success: (data) => `Successfully saved ${data.name}`,
    error: (err) => `This just happened: ${err.toString()}`,
  },
  {
    style: {
      minWidth: '250px',
    },
    success: {
      duration: 5000,
      icon: '🔥',
    },
  }
);
```

--------------------------------

### Set Default Styles for Specific Toast Types

Source: https://react-hot-toast.com/docs/styling

Customize styles for different notification types (e.g., success, error) by providing type-specific `toastOptions`. This allows for distinct visual cues for each status.

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

--------------------------------

### Configure Relative Toaster Positioning

Source: https://react-hot-toast.com/docs/version-2

Set the `containerStyle` prop on the `<Toaster/>` component to `'absolute'` to position the toaster anywhere on the page, overriding the default behavior.

```javascript
<Toaster containerStyle={{ position: 'absolute' }} />
```

--------------------------------

### Custom Render Function

Source: https://react-hot-toast.com/docs/toaster

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.

```APIDOC
## 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

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

--------------------------------

### useToaster() Hook

Source: https://react-hot-toast.com/docs/use-toaster

The useToaster hook is a headless hook that manages toast state and lifecycle. It does not render any UI components, allowing for complete customization of the toast appearance and behavior. It accepts optional default toast options and a toaster ID for managing multiple independent toaster instances.

```APIDOC
## useToaster(toastOptions?, toasterId?)

### Description
Manages toast state and lifecycle without rendering UI components.

### Parameters
#### `toastOptions` (DefaultToastOptions) - Optional
Default options for all toasts in this instance.

#### `toasterId` (string) - Optional, Default: 'default'
Unique identifier for this toaster instance.

### Returns
An object containing:
- `toasts`: Array of all toasts in this toaster instance.
- `handlers`: An object with functions to control toast behavior:
  - `startPause()`: Pause all toast timers.
  - `endPause()`: Resume all toast timers.
  - `updateHeight(toastId, height)`: Update toast height for offset calculations.
  - `calculateOffset(toast, options)`: Calculate vertical offset for toast positioning.

### Example
```javascript
import { useToaster } from 'react-hot-toast/headless';

const Notifications = () => {
  const { toasts, handlers } = useToaster();
  const { startPause, endPause } = handlers;

  return (
    <div onMouseEnter={startPause} onMouseLeave={endPause}>
      {toasts
        .filter((toast) => toast.visible)
        .map((toast) => (
          <div key={toast.id} {...toast.ariaProps}>
            {toast.message}
          </div>
        ))}
    </div>
  );
};
```
```

--------------------------------

### Change Icon Theme Colors

Source: https://react-hot-toast.com/docs/styling

Customize the primary and secondary colors of notification icons by providing an `iconTheme` object within `toastOptions`. This allows for brand-aligned icons.

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

--------------------------------

### Render Function with Toast Properties for Dismiss

Source: https://react-hot-toast.com/docs/toast

Supply a function to the toast call to receive toast properties, such as the ID. This enables adding interactive elements like a dismiss button.

```javascript
toast(
  (t) => (
    <span>
      Custom and <b>bold</b>
      <button onClick={() => toast.dismiss(t.id)}>Dismiss</button>
    </span>
  ),
  {
    icon: <Icon />,
  }
);
```

--------------------------------

### Custom Toast Rendering with `resolveValue`

Source: https://react-hot-toast.com/docs/toaster

Render toasts using a custom function passed as children to `<Toaster />`. Use `resolveValue` to correctly display message types like Text, JSX, or functions that resolve to JSX.

```javascript
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>
```

--------------------------------

### Add Custom Content to ToastBar

Source: https://react-hot-toast.com/docs/toast-bar

Provide a render function to ToastBar to modify its content. The function receives `icon` and `message` as arguments. Conditional rendering for elements like dismiss buttons is supported.

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


<Toaster>
  {(t) => (
    <ToastBar toast={t}>
      {({ icon, message }) => (
        <>
          {icon}
          {message}
          {t.type !== 'loading' && (
            <button onClick={() => toast.dismiss(t.id)}>X</button>
          )}
        </>
      )}
    </ToastBar>
  )}
</Toaster>
```

--------------------------------

### Error Toast

Source: https://react-hot-toast.com/docs/toast

Creates a toast notification with an error icon, used to indicate a failed operation.

```APIDOC
## toast.error()

### Description
Creates a toast notification with an animated error icon, indicating a failed operation.

### Method
`toast.error(message, options?)`

### Parameters
#### Message
- **message** (string) - The text content of the error toast.

#### Options
- **duration** (number) - The duration in milliseconds the toast will be visible. Defaults to 4000ms for error toasts.
- **position** (string) - The position of the toast on the screen.
- **style** (object) - Custom CSS styles for the toast.
- **className** (string) - Custom CSS classes for the toast.
- **icon** (string | ReactNode) - A custom icon to display in the toast.
- **iconTheme** (object) - Theme for the icon, with `primary` and `secondary` colors.
- **ariaProps** (object) - ARIA properties for accessibility.
- **removeDelay** (number) - Delay in milliseconds before removing the toast after dismissal.
- **toasterId** (string) - The ID of the toaster instance to use.

### Request Example
```javascript
t oast.error('This is an error!');
```

### Response
Returns a unique `toastId`.
```

--------------------------------

### Blank Toast

Source: https://react-hot-toast.com/docs/toast

The most basic toast variant. It displays a simple message without an icon by default. You can add a custom icon using the options.

```javascript
toast('Hello World');
```

--------------------------------

### Adding Custom Content to ToastBar

Source: https://react-hot-toast.com/docs/toast-bar

You can add a render function to the ToastBar to modify its content. This function receives an object containing the `icon` and `message` of the toast.

```APIDOC
## 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.

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

<Toaster>
  {(t) => (
    <ToastBar toast={t}>
      {({ icon, message }) => (
        <>
          {icon}
          {message}
          {t.type !== 'loading' && (
            <button onClick={() => toast.dismiss(t.id)}>X</button>
          )}
        </>
      )}
    </ToastBar>
  )}
</Toaster>
```
```

--------------------------------

### Update Toast

Source: https://react-hot-toast.com/docs/toast

Update the content or options of an existing toast notification.

```APIDOC
## Update Toast

### Description
Updates an existing toast notification using its unique ID. This is useful for changing the message, icon, or other options of a toast after it has been displayed, such as transitioning from a loading state to a success or error state.

### Method
`toast(message, options)` where `options.id` is the ID of the toast to update.

### Parameters
#### Message
- **message** (string | ReactNode) - The new content for the toast.

#### Options
- **id** (string) - Required. The unique ID of the toast to update.
- **duration** (number) - The new duration for the toast.
- **position** (string) - The new position for the toast.
- **style** (object) - New custom CSS styles for the toast.
- **className** (string) - New custom CSS classes for the toast.
- **icon** (string | ReactNode) - A new custom icon for the toast.
- **iconTheme** (object) - New theme for the icon.
- **ariaProps** (object) - New ARIA properties.
- **removeDelay** (number) - New delay for toast removal.
- **toasterId** (string) - The ID of the toaster instance to use.

### Request Example
```javascript
const toastId = toast.loading('Processing...');

// Simulate an operation
setTimeout(() => {
  toast('Operation successful!', {
    id: toastId,
    icon: '✅',
    duration: 3000
  });
}, 2000);
```
```

--------------------------------

### Set Default Styles for All Toasts

Source: https://react-hot-toast.com/docs/styling

Apply global styles to all notifications using `toastOptions` in the `Toaster` component. This affects border, padding, and text color.

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

--------------------------------

### Control Gap Between Toasts with Gutter

Source: https://react-hot-toast.com/docs/version-2

Use the `gutter` prop on the `<Toaster/>` component to define the spacing between individual toasts in the notification stack.

```javascript
<Toaster gutter={30} />
```

--------------------------------

### Display Toast in a Specific Toaster

Source: https://react-hot-toast.com/docs/multi-toaster

To target a specific toaster, pass its `toasterId` to the `toast` function. If no `toasterId` is provided, toasts will appear in the default toaster.

```javascript
toast('Notification for Area 1', {
  toasterId: 'area1',
});
```

--------------------------------

### Set Per-Toast Position

Source: https://react-hot-toast.com/docs/version-2

Specify a `position` option when dispatching a toast to control its placement. This allows for multiple toasts to be displayed at different positions simultaneously.

```javascript
toast.success('Always at the bottom', {
  position: 'bottom-center',
});
```

--------------------------------

### Customize ToastBar Props

Source: https://react-hot-toast.com/docs/toast-bar

Use the ToastBar component with props to overwrite default styles and adapt animations based on position.

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

--------------------------------

### Error Toast

Source: https://react-hot-toast.com/docs/toast

Generates a notification with an animated error icon, suitable for indicating failures. The appearance can be customized with the `iconTheme` option.

```javascript
toast.error('This is an error!');
```

--------------------------------

### Position a Toaster Absolutely

Source: https://react-hot-toast.com/docs/multi-toaster

To position a toaster in a specific area, set the parent container's position to `relative` and the toaster's `containerStyle` to `position: 'absolute'`. Adjust the `position` prop for desired placement.

```jsx
<div style={{ position: 'relative' }}>
  <Toaster
    toasterId="area1"
    position="top-center"
    containerStyle={{ position: 'absolute' }}
  />
</div>
```

--------------------------------

### Update Existing Toast

Source: https://react-hot-toast.com/docs/toast

Update the content or options of an existing toast by providing its unique ID in the toast options. This is useful for changing a loading toast to a success or error state.

```javascript
const toastId = toast.loading('Loading...');


// ...


tost.success('This worked', {
  id: toastId,
});
```

--------------------------------

### Dismiss Toast

Source: https://react-hot-toast.com/docs/toast

Programmatically dismiss a toast notification.

```APIDOC
## toast.dismiss()

### Description
Manually dismisses a toast notification. If no `toastId` is provided, all active toasts will be dismissed.

### Method
`toast.dismiss(toastId?)`

### Parameters
#### Toast ID
- **toastId** (string, optional) - The unique ID of the toast to dismiss. If omitted, all toasts are dismissed.

### Request Example
```javascript
// Dismiss a specific toast
const toastId = toast.loading('Loading...');
// ... later
t oast.dismiss(toastId);

// Dismiss all toasts
t oast.dismiss();
```

### Note
Dismissing a toast triggers its exit animation. To remove toasts instantly without animation, use `toast.remove()`.
```

--------------------------------

### Dismiss All Toasts

Source: https://react-hot-toast.com/docs/toast

Dismiss all currently active toast notifications simultaneously. This is achieved by calling `toast.dismiss()` without any arguments.

```javascript
toast.dismiss();
```

--------------------------------

### Adjust Toaster Offset with Container Styles

Source: https://react-hot-toast.com/docs/version-2

Modify the offset of the toaster by providing `top`, `right`, `bottom`, or `left` styles within the `containerStyle` prop of the `<Toaster/>` component.

```javascript
<Toaster containerStyle={{ top: '8px' }} />
```

--------------------------------

### Remove Toasts Instantly

Source: https://react-hot-toast.com/docs/toast

Immediately remove toasts from the DOM without any exit animations. Use `toast.remove()` with an optional `toastId` to remove a specific toast, or call it without an ID to remove all.

```javascript
toast.remove(toastId);


// or


tost.remove();
```

--------------------------------

### Change Offset Between Toasts

Source: https://react-hot-toast.com/docs/styling

Control the vertical spacing between multiple notifications by adjusting the `gutter` prop on the `Toaster` component.

```jsx
<Toaster gutter={24} />
```

--------------------------------

### Prevent Duplicate Toasts

Source: https://react-hot-toast.com/docs/toast

Assign a permanent ID to a toast to prevent multiple instances of the same notification from appearing.

```APIDOC
## Prevent Duplicate Toasts

### Description
To prevent duplicate toasts from appearing, you can assign a unique, permanent `id` to a toast. If a toast with the same ID already exists, the new toast will update the existing one instead of creating a new one.

### Method
`toast(message, options)` where `options.id` is a unique identifier.

### Parameters
#### Message
- **message** (string | ReactNode) - The content of the toast.

#### Options
- **id** (string) - Required. A unique, permanent identifier for the toast. This ID should be consistent across calls to ensure duplicates are handled.
- Other toast options can also be provided.

### Request Example
```javascript
// First call, creates the toast
t oast.success('Copied to clipboard!', {
  id: 'clipboard-toast',
  duration: 2000
});

// Second call with the same ID, updates the existing toast or does nothing if it's already gone
t oast.success('Successfully copied!', {
  id: 'clipboard-toast',
  duration: 1500
});
```
```

--------------------------------

### ToastBar Component Usage

Source: https://react-hot-toast.com/docs/toast-bar

The ToastBar is the default toast component rendered by the Toaster. It can be used within a Toaster with a custom render function to override its default behavior and appearance.

```APIDOC
## `<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

```jsx
<ToastBar
  toast={t} // The toast object containing information about the toast
  style={{}} // Overwrite styles for the toast
  position="top-center" // Used to adapt the animation based on toast position
/>
```
```

--------------------------------

### Configure Toast Remove Delay

Source: https://react-hot-toast.com/docs/toast

Customize the delay before a toast is removed from the DOM after being dismissed, allowing for exit animations. This can be set per toast or globally via the `<Toaster/>` component's `toastOptions`.

```javascript
toast.success('Successfully created!', { removeDelay: 500 });
```

```jsx
<Toaster
  toastOptions={{
    removeDelay: 500,
  }}
/>;
```

--------------------------------

### Change Toaster Offset

Source: https://react-hot-toast.com/docs/styling

Adjust the position of the entire toaster container on the screen by modifying the `top`, `left`, `bottom`, and `right` properties within `containerStyle`.

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

--------------------------------

### Remove Toast

Source: https://react-hot-toast.com/docs/toast

Instantly remove a toast notification without animation.

```APIDOC
## toast.remove()

### Description
Instantly removes a toast notification from the DOM without triggering any exit animation. If no `toastId` is provided, all active toasts are removed.

### Method
`toast.remove(toastId?)`

### Parameters
#### Toast ID
- **toastId** (string, optional) - The unique ID of the toast to remove. If omitted, all toasts are removed.

### Request Example
```javascript
// Remove a specific toast instantly
const toastId = toast.loading('Loading...');
// ... later
t oast.remove(toastId);

// Remove all toasts instantly
t oast.remove();
```
```
Tokens:
Raw