rc-notification

react-component
esm Styles
rc-notification JS library homepage rc-notification JS library on GitHub rc-notification JS library on npm Download rc-notification JS library

notification ui component for react

Version 5.6.4 License MIT Vulnerabilities 0
rc-notification JS library homepage
rc-notification JS library on GitHub
rc-notification JS library on npm
Download rc-notification JS library
Keywords
reactreact-componentreact-notificationnotification
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/rc-notification@5.6.4/lib/index.min.js "></script>
Learn more
Readme Files Statistics Browse CDN

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 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.