Message

Used to show important tips on a page.

Import 

import { Message, toaster } from 'rsuite';

// or
import Message from 'rsuite/Message';
import toaster from 'rsuite/toaster';

Examples

Default

Types

Icons

Closable

Full

With toaster

A message type that contains an Alert

Props & Methods

<Message>

Property Type (Default) Description
children ReactNode The description information for the message.
classPrefix string ('message') The prefix of the component CSS class.
closable boolean Whether it is possible to close the message box
duration number (2000) Delay automatic closing message, only effective when used in combination with toaster. Do not automatically turn off notifications when the value is 0 (unit: milliseconds)
full boolean Fill the container
header ReactNode The title of the message.
onClose (event?: MouseEvent) => void Called after the message is closed
showIcon boolean Whether to display an icon.
type 'info' | 'success' | 'warning' | 'error' The type of the message box.

toaster

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);
}

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

e.g:

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

// Notification
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;