What is rc-notification?
The rc-notification package is a React component library for generating and managing notifications in a web application. It allows developers to easily display notifications or alerts to users, with customizable content, styles, and behaviors.
What are rc-notification's main functionalities?
Creating and displaying a notification
This feature allows developers to create and display a notification with a title, description, and an onClick event handler. The notification appears on the screen and can be interacted with by the user.
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification.',
onClick: () => {
console.log('Notification Clicked!');
}
});
Customizing notification duration
This code sample demonstrates how to set a custom duration for a notification, in seconds. After the specified time, the notification will automatically close.
notification.open({
message: 'Notification Title',
description: 'This notification will close after 10 seconds.',
duration: 10
});
Specifying the position of the notification
This feature allows setting the position of notifications globally. You can specify the placement (e.g., topRight, topLeft, bottomRight, bottomLeft) and the distance from the top or bottom of the viewport.
notification.config({
placement: 'topRight',
top: 50,
bottom: 50
});
Other packages similar to rc-notification
react-toastify
react-toastify is a similar package that provides notifications or 'toasts'. It is highly customizable and easy to use, offering features like auto-dismiss, pause on hover, and animations. Compared to rc-notification, react-toastify might offer a more modern look and feel, as well as additional features for controlling the display and behavior of notifications.
notistack
notistack is another React notification library that builds on top of Material-UI's Snackbar component. It allows for stacking notifications and offers several customization options. Unlike rc-notification, notistack integrates closely with Material-UI, making it a good choice for projects already using Material-UI.
rc-notification
React Notification UI Component
Install
Usage
import Notification from 'rc-notification';
Notification.newInstance({}, notification => {
notification.notice({
content: 'content'
});
});
Compatibility
IE / Edge | Firefox | Chrome | Safari | Electron |
---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Example
http://localhost:8001
online example: https://notification-react-component.vercel.app
API
Notification.newInstance(props, (notification) => void) => void
props details:
name | type | default | description |
---|
prefixCls | String | | prefix class name for notification container |
style | Object | {'top': 65, left: '50%'} | additional style for notification container. |
getContainer | getContainer(): HTMLElement | | function returning html node which will act as notification container |
maxCount | number | | max notices show, drop first notice if exceed limit |
notification.notice(props)
props details:
name | type | default | description |
---|
content | React.Element | | content of notice |
key | String | | id of this notice |
closable | Boolean | | whether show close button |
onClose | Function | | called when notice close |
duration | number | 1.5 | after duration of time, this notice will disappear.(seconds) |
style | Object | { right: '50%' } | additional style for single notice node. |
closeIcon | ReactNode | | specific the close icon. |
props | Object | | An object that can contain data-* , aria-* , or role props, to be put on the notification div . This currently only allows data-testid instead of data-* in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. |
notification.removeNotice(key:string)
remove single notice with specified key
notification.destroy()
destroy current notification
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-notification is released under the MIT license.