@rc-component/notification

React Notification UI Component

Install

Usage

import Notification from '@rc-component/notification';

Notification.newInstance({}, (notification) => {
  notification.notice({
    content: 'content',
  });
});

Compatibility

Browser	Supported Version
Firefox	last 2 versions
Chrome	last 2 versions
Safari	last 2 versions
Electron	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 | { closeIcon: ReactNode, onClose: VoidFunction }		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 microsoft/TypeScript#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-component/notification is released under the MIT license.