Display global messages as feedback in response to user operations.
Examples
Basic
Basic.
Async function
Async function.
Update
Update.
Show close icon
duration is set to 0 to keep Message not closed, then you need to set showClose to display the close button and close it manually.
Maximum number of Messages
Controls the number of Messages.
Method call
Directly through the method call.
Methods
The component provides some static methods, the usage and parameters are as follows:
Message.success(config | string)Message.error(config | string)Message.info(config | string)Message.warning(config | string)Message.loading(config | string)Message.open(config | string)
The config type is as follows
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| content | prompt content | ReactNode | - | true |
| duration | Delay for automatic shutdown, in millisecond. Do not close automatically when set to 0 | number | 3000 | - |
| icon | custom icon | ReactNode | - | - |
| closeIcon | Custom close icon | ReactNode | - | - |
| showClose | Whether to show the close icon | boolean | - | - |
| onAfterClosed | callback after Message is closed | () => void | - | - |
In addition to the above parameters, it also supports basic
HTMLAttributes, such asclassName,style.
setGlobalConfig
For the global method,
ThemeContextcannot be obtained through the context, so we also provide a method of manually setting
Message.setGlobalConfig({
themeProviderProps: Omit<ThemeProviderProps, 'children'>,
top?: number;
container?: PortalContainerType<HTMLElement>;
});
For details, please refer to ThemeProvider.