Message
Used to show important tips on a page.
Import
import { Message, toaster } from 'rsuite';
// or
import Message from 'rsuite/lib/Message';
import toaster from 'rsuite/lib/toaster';
Examples
Default
Types
Icons
Closable
Full
With toaster
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 removal of messages. When set to 0, the message is not automatically removed. (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 | 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;