rc-notification
v5.6.4TypeScript
notification ui component for react
1.9M/weekUpdated 9 months agoMITUnpacked: 89.3 KB
Published by benjycui
npm install rc-notificationrc-notification
React Notification UI Component
[![NPM version][npm-image]][npm-url]  [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/rc-notification.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-notification
[github-actions-image]: https://github.com/react-component/notification/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/notification/actions
[coveralls-image]: https://img.shields.io/coveralls/react-component/notification.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/notification?branch=master
[download-image]: https://img.shields.io/npm/dm/rc-notification.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-notification
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-notification
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-notification
Install
Usage
``js
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
$3
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 |
$3
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) |
| showProgress | boolean | false | show with progress bar for auto-closing notification |
| pauseOnHover | boolean | true | keep the timer running or not on hover |
| 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. |
$3
remove single notice with specified key
$3
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.