Notification
For global notifications, suspended in the corner of the page.
Notification.openOpen a default notification.Notification.infoOpen a info notification.Notification.successOpen a notification that means success information.Notification.warningOpen a notification that means warning information.Notification.errorOpen a notification that means error information.Notification.closeClose a notification.Notification.closeAllClose all notifications.
Usage
import { Notification } from 'rsuite';Examples
Default
Message type
Placement
Custom
Close
Duration
Duration is an optional item. When set to 0, it is not automatically turned close.
Methods
Notification.open
Notification.open(props: NotificationProps);Notification.info
Notification.info(props: NotificationProps);Notification.success
Notification.success(props: NotificationProps);Notification.warning
Notification.warning(props: NotificationProps);Notification.error
Notification.error(props: NotificationProps);Notification.close
Notification.close(key?: string);Notification.closeAll
Notification.closeAll();Types
interface NotificationProps {
title: React.ReactNode;
description: React.ReactNode;
duration?: number;
placement?: string;
className?: string;
style?: React.CSSProperties;
top?: number;
bottom?: number;
key?: string;
onClose?: () => void;
}| Property | Type (Default) |
Description |
|---|---|---|
| bottom | number (24) |
The distance from the bottom of the message box |
| description * | React.Node | The description of the message box |
| duration | number (4500) |
message box duration (Unit: milliseconds) |
| key | string | The message box is uniquely identified, and you must fill out the field if you want to manually remove the message box. |
| onClose | () => void | Closes the callback function. |
| placement | enum: NotificationPlacement('topEnd') |
The placement of the message box. |
| title * | string | The title of the message box |
| top | number (24) |
The distance from the top of the message box |