@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 \| false	4.5	The delay for automatic closing in seconds. Set to 0 or false to not close automatically.
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-component/notification is released under the MIT license.

Current Tags

1.2.0 ... latest (5 months ago)

4 Versions

1.2.0 ... 5 months ago
1.1.0 ... 8 months ago
1.0.2 ... a year ago
1.0.0 ... a year ago