.. | ||
assets | ||
es | ||
lib | ||
LICENSE.md | ||
package.json | ||
README.md |
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
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) |
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. |
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.