useToaster

useToaster is a React Hook for creating and managing toast notifications.

Usage

Install CustomProvider

First, you need to install CustomProvider at the root of your application to manage the toast rendering container.

import { CustomProvider } from 'rsuite';

function App({ children }) {
  return <CustomProvider>{children}</CustomProvider>;
}

Using useToaster

import { useToaster, Message, Notification } from 'rsuite';

function MyApp() {
  const toaster = useToaster();

  // Display a message
  toaster.push(<Message>message</Message>);


  // Display a notification
  toaster.push(<Notification>notification</Notification>);
}

Examples

With Message

Demonstrates how to use Toaster with the Message component to display temporary message notifications.

With Notification

Shows how to integrate Toaster with the Notification component for more detailed notifications.

Custom Toast

Illustrates how to create custom-styled Toast messages, including custom content and styling.

Custom Container

Demonstrates how to render Toast messages to a specified DOM container instead of the default body.

API

useToaster()

Returns an object with the following methods:

Method Type Description
push (message: ReactNode, options?: ToastOptions) => string Display a toast message
remove (toastId: string) => void Remove a message by ID
clear () => void Remove all messages

Type Definitions

ToastOptions 

interface ToastOptions {
  /**
   * Set the container where the message appears
   * @default document.body
   */
  container?: HTMLElement | (() => HTMLElement);

  /**
   * The number of milliseconds to wait before automatically closing the message
   * @default 4500
   */
  duration?: number;

  /**
   * Reset the auto-close timer when the mouse enters the message
   * @default true
   * @version 5.65.0
   */
  mouseReset?: boolean;

  /**
   * Set the position of the message
   * @default 'topCenter'
   */
  placement?: 'topCenter' | 'topStart' | 'topEnd' | 'bottomCenter' | 'bottomStart' | 'bottomEnd';
}