Toaster

Toaster display brief, temporary notifications of actions, errors, or other events in an application. It is often used with the Message and Notification components.

Import

MainIndividual
import { useToaster } from 'rsuite';

Examples

With Message

With Notification

Custom Toast

Hooks

useToaster

useToaster is a React Hook for creating and managing toasts.

import { useToaster } from 'rsuite';

return () => {
  const toaster = useToaster();

  const handleClick = () => {
    // Push a message
    toaster.push(<Message>message</Message>);
  };

  return <Button onClick={handleClick}>Push</Button>;
};

toaster.push

Push a message and return a unique toastId.

toaster.push(message: ReactNode, toastProps?: ToastProps): string;
ToastProps
Property Type(Default) Description
placement 'topCenter' | 'topStart' | 'topEnd' | 'bottomCenter' | 'bottomStart' | 'bottomEnd' ('topCenter') Set the position of the message
container HTMLElement | (() => HTMLElement) Set the container where the message appears
duration number The number of milliseconds to wait before automatically closing the message

toaster.remove

Remove a message by toastId.

toaster.remove(toastId: string): void;

toaster.clear

Remove all messages.

toaster.clear(): void;
Vercel banner