Notification

Used for system notifications. Generally used to push messages.

Import

MainIndividual
import { Notification } from 'rsuite';

Examples

Basic

Types

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) ⚠️[Deprecated] Use toaster.push(<Notification />, { duration: 2000 }) instead.
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