Notification

Used for system notifications. Generally used to push messages.

Import 

import { Notification, toaster } from 'rsuite';

// or
import Notification from 'rsuite/lib/Notification';
import toaster from 'rsuite/lib/toaster';

Examples

Default

Message type

Closeable

With toaster

Props & Methods

<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 removal of messages. When set to 0, the message is not automatically removed. (Unit: milliseconds)
header * string The title of the message box
onClose () => void Callback after the message is removed
placement enum: NotificationPlacement('topCenter') The placement of the message box.
type enum: 'info', 'success', 'warning', 'error' The type of the message box.

toaster

toaster.push

Push a message and return a unique key.


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

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

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

e.g:

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;