Skip to content

react-component/notification

Repository files navigation

rc-notification

React Notification UI Component

NPM version dumi build status Test coverage npm download bundle size

Install

rc-notification

Usage

import Notification from 'rc-notification';

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

Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
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

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 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-notification is released under the MIT license.