Notification

Used for system notifications. Generally used to push messages.

Import 

import { Notification, useToaster } from 'rsuite';

// or
import Notification from 'rsuite/Notification';
import { useToaster } from 'rsuite/toaster';

Examples

Basic

Message type

Closeable

With toaster

Props & Hooks

<Notification>

Property Type (Default) Description
children * ReactNode The description of the message box
closable boolean The remove button is displayed.
duration number (4500) Delay automatic closing notification, only effective when used in combination with toaster. Do not automatically turn off notifications when the value is 0 (unit: milliseconds)
header * string The title of the message box
onClose () => void Callback after the message is removed
placement Placement('topCenter') The placement of the message box.
type 'info' | 'success' | 'warning' | 'error' The type of the message box.

useToaster

useToaster is a React Hook for creating and managing Toasts.

import { useToaster } from 'rsuite';

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

  ...
};

toaster.push

Push a message and return a unique key.

type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';

interface ToastContainerProps{
  /** The placement of the message box */
  placement?: PlacementType;

  /** Set the message to appear in the specified container */
  container?: HTMLElement | (() => HTMLElement);

  /** The number of milliseconds to wait before automatically closing a message */
  duration?: number;
}

toaster.push(message: ReactNode, options?: ToastContainerProps): string;

e.g:

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

// Push a message and set the duration
toaster.push(<Message>message</Message>, {
  duration: 1000
});

// Push notification and set placement
toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove

Remove a message by key

toaster.remove(key: string): void;

e.g:

const key = toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove(key);

toaster.clear

Clear all messages

toaster.clear(): void;

ts:Placement 

type Placement = 'topStart' | 'topCenter' | 'topEnd' | 'bottomStart' | 'bottomCenter' | 'bottomEnd';
Vercel banner