Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
rc-notification
Advanced tools
Weekly downloads
Package description
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.
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
});
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 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.
Readme
React Notification UI Component
import Notification from 'rc-notification';
Notification.newInstance({}, notification => {
notification.notice({
content: 'content'
});
});
IE / Edge | Firefox | Chrome | Safari | Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
online example: http://react-component.github.io/notification/
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 |
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. |
remove single notice with specified key
destroy current notification
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-notification is released under the MIT license.
FAQs
notification ui component for react
The npm package rc-notification receives a total of 961,149 weekly downloads. As such, rc-notification popularity was classified as popular.
We found that rc-notification demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.