{"_id":"@rc-component/notification","_rev":"4537588","name":"@rc-component/notification","description":"notification ui component for react","dist-tags":{"latest":"1.2.0"},"maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"time":{"modified":"2026-04-09T15:01:49.000Z","created":"2025-03-21T15:39:07.552Z","1.2.0":"2025-11-03T03:30:31.544Z","1.1.0":"2025-08-05T08:53:30.781Z","1.0.2":"2025-04-03T10:45:50.999Z","1.0.0":"2025-03-21T15:39:07.552Z"},"users":{},"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/notification.git"},"versions":{"1.2.0":{"name":"@rc-component/notification","version":"1.2.0","description":"notification ui component for react","engines":{"node":">=8.x"},"keywords":["react","react-component","react-notification","notification"],"homepage":"http://github.com/react-component/notification","maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/notification.git"},"bugs":{"url":"http://github.com/react-component/notification/issues"},"license":"MIT","main":"lib/index","module":"es/index","typings":"es/index.d.ts","scripts":{"start":"dumi dev","build":"dumi build","docs:deploy":"gh-pages -d .doc","compile":"father build && lessc assets/index.less assets/index.css","prepublishOnly":"npm run compile && rc-np","lint":"eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js","test":"vitest --watch=false","test:watch":"vitest","coverage":"vitest run --coverage","now-build":"npm run build","prepare":"husky install"},"dependencies":{"@rc-component/motion":"^1.1.4","@rc-component/util":"^1.2.1","clsx":"^2.1.1"},"devDependencies":{"@rc-component/father-plugin":"^2.0.4","@rc-component/np":"^1.0.3","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^15.0.7","@types/node":"^24.5.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@types/testing-library__jest-dom":"^6.0.0","@typescript-eslint/eslint-plugin":"^5.59.7","@typescript-eslint/parser":"^5.59.7","@umijs/fabric":"^2.0.0","@vitest/coverage-v8":"^0.34.2","dumi":"^2.1.0","eslint":"^7.8.1","father":"^4.0.0","gh-pages":"^3.1.0","husky":"^8.0.3","jsdom":"^24.0.0","less":"^4.2.0","lint-staged":"^14.0.1","prettier":"^3.0.2","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.4.5","vitest":"^0.34.2"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"lint-staged":{"**/*.{js,jsx,tsx,ts,md,json}":["prettier --write","git add"]},"_id":"@rc-component/notification@1.2.0","gitHead":"477e95ff0509c98e339d9e9b599189df02279cad","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"shasum":"dd7c7d50f1d3217bfbc75bc46259e212096855c5","size":13988,"noattachment":false,"key":"/@rc-component/notification/-/@rc-component/notification-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/notification/download/@rc-component/notification-1.2.0.tgz"},"_npmUser":{"name":"zombiej","email":"smith3816@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/notification_1.2.0_1762140631347_0.37014417840859926"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-11-03T03:30:31.544Z","publish_time":1762140631544,"_source_registry_name":"default","_cnpm_publish_time":1762140631544},"1.1.0":{"name":"@rc-component/notification","version":"1.1.0","description":"notification ui component for react","engines":{"node":">=8.x"},"keywords":["react","react-component","react-notification","notification"],"homepage":"http://github.com/react-component/notification","maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/notification.git"},"bugs":{"url":"http://github.com/react-component/notification/issues"},"license":"MIT","main":"lib/index","module":"es/index","typings":"es/index.d.ts","scripts":{"start":"dumi dev","build":"dumi build","docs:deploy":"gh-pages -d .doc","compile":"father build && lessc assets/index.less assets/index.css","prepublishOnly":"npm run compile && rc-np","lint":"eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js","test":"vitest --watch=false","test:watch":"vitest","coverage":"vitest run --coverage","now-build":"npm run build","prepare":"husky install"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"dependencies":{"@rc-component/motion":"^1.1.4","@rc-component/util":"^1.2.1","classnames":"2.x"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.59.7","@typescript-eslint/parser":"^5.59.7","@rc-component/father-plugin":"^2.0.4","@rc-component/np":"^1.0.3","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^15.0.7","@types/classnames":"^2.2.10","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@types/testing-library__jest-dom":"^6.0.0","@umijs/fabric":"^2.0.0","@vitest/coverage-v8":"^0.34.2","cross-env":"^7.0.0","dumi":"^2.1.0","eslint":"^7.8.1","father":"^4.0.0","gh-pages":"^3.1.0","husky":"^8.0.3","jsdom":"^24.0.0","less":"^4.2.0","lint-staged":"^14.0.1","prettier":"^3.0.2","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.4.5","vitest":"^0.34.2"},"lint-staged":{"**/*.{js,jsx,tsx,ts,md,json}":["prettier --write","git add"]},"_id":"@rc-component/notification@1.1.0","gitHead":"dd8325725a0616be8af2fc5c06d44db4c4349a84","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"shasum":"f291008411c4061c6df4d215d8671a5458fc00d2","size":13964,"noattachment":false,"key":"/@rc-component/notification/-/@rc-component/notification-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/notification/download/@rc-component/notification-1.1.0.tgz"},"_npmUser":{"name":"zombiej","email":"smith3816@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/notification_1.1.0_1754384010586_0.47399459785847453"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-08-05T08:53:30.781Z","publish_time":1754384010781,"_source_registry_name":"default","_cnpm_publish_time":1754384010781},"1.0.2":{"name":"@rc-component/notification","version":"1.0.2","description":"notification ui component for react","engines":{"node":">=8.x"},"keywords":["react","react-component","react-notification","notification"],"homepage":"http://github.com/react-component/notification","maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/notification.git"},"bugs":{"url":"http://github.com/react-component/notification/issues"},"license":"MIT","main":"lib/index","module":"es/index","typings":"es/index.d.ts","scripts":{"start":"dumi dev","build":"dumi build","docs:deploy":"gh-pages -d .doc","compile":"father build && lessc assets/index.less assets/index.css","prepublishOnly":"npm run compile && rc-np","lint":"eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js","test":"vitest --watch=false","test:watch":"vitest","coverage":"vitest run --coverage","now-build":"npm run build","prepare":"husky install"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"dependencies":{"@rc-component/motion":"^1.1.4","@rc-component/util":"^1.2.1","classnames":"2.x"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.59.7","@typescript-eslint/parser":"^5.59.7","@rc-component/father-plugin":"^2.0.4","@rc-component/np":"^1.0.3","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^15.0.7","@types/classnames":"^2.2.10","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@types/testing-library__jest-dom":"^6.0.0","@umijs/fabric":"^2.0.0","@vitest/coverage-v8":"^0.34.2","cross-env":"^7.0.0","dumi":"^2.1.0","eslint":"^7.8.1","father":"^4.0.0","gh-pages":"^3.1.0","husky":"^8.0.3","jsdom":"^24.0.0","less":"^4.2.0","lint-staged":"^14.0.1","prettier":"^3.0.2","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.4.5","vitest":"^0.34.2"},"lint-staged":{"**/*.{js,jsx,tsx,ts,md,json}":["prettier --write","git add"]},"_id":"@rc-component/notification@1.0.2","gitHead":"de132178ef6d903830c61d68ee5feb362790fc62","_nodeVersion":"22.8.0","_npmVersion":"10.8.3","dist":{"shasum":"f301d26003d1ad92ef704eec90167c01c0b41085","size":13887,"noattachment":false,"key":"/@rc-component/notification/-/@rc-component/notification-1.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/notification/download/@rc-component/notification-1.0.2.tgz"},"_npmUser":{"name":"afc163","email":"afc163@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/notification_1.0.2_1743677150804_0.061626351679977986"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-04-03T10:45:50.999Z","publish_time":1743677150999,"_source_registry_name":"default","_cnpm_publish_time":1743677150999},"1.0.0":{"name":"@rc-component/notification","version":"1.0.0","description":"notification ui component for react","engines":{"node":">=8.x"},"keywords":["react","react-component","react-notification","notification"],"homepage":"http://github.com/react-component/notification","maintainers":[{"name":"afc163","email":""},{"name":"chenshuai2144","email":""},{"name":"madccc","email":""},{"name":"peachscript","email":""},{"name":"zombiej","email":""}],"repository":{"type":"git","url":"git+ssh://git@github.com/react-component/notification.git"},"bugs":{"url":"http://github.com/react-component/notification/issues"},"license":"MIT","main":"lib/index","module":"es/index","typings":"es/index.d.ts","scripts":{"start":"dumi dev","build":"dumi build","docs:deploy":"gh-pages -d .doc","compile":"father build && lessc assets/index.less assets/index.css","prepublishOnly":"npm run compile && rc-np","lint":"eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js","test":"vitest --watch=false","test:watch":"vitest","coverage":"vitest run --coverage","now-build":"npm run build","prepare":"husky install"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"devDependencies":{"@rc-component/father-plugin":"^2.0.4","@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^15.0.7","@types/classnames":"^2.2.10","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@types/testing-library__jest-dom":"^6.0.0","@umijs/fabric":"^2.0.0","@vitest/coverage-v8":"^0.34.2","cross-env":"^7.0.0","dumi":"^2.1.0","eslint":"^7.8.1","father":"^4.0.0","gh-pages":"^3.1.0","husky":"^8.0.3","jsdom":"^24.0.0","less":"^4.2.0","lint-staged":"^14.0.1","prettier":"^3.0.2","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.4.5","vitest":"^0.34.2"},"dependencies":{"@rc-component/motion":"^1.1.4","@rc-component/np":"^1.0.3","@rc-component/util":"^1.2.1","classnames":"2.x"},"lint-staged":{"**/*.{js,jsx,tsx,ts,md,json}":["prettier --write","git add"]},"_id":"@rc-component/notification@1.0.0","gitHead":"f8d829dbf43d925dcfb01321f7fbbae55d010a97","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"shasum":"98fcade829b5fad60400f9edfa7d042e74964590","size":13789,"noattachment":false,"key":"/@rc-component/notification/-/@rc-component/notification-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rc-component/notification/download/@rc-component/notification-1.0.0.tgz"},"_npmUser":{"name":"zombiej","email":"smith3816@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/notification_1.0.0_1742571547359_0.10546004490303518"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-03-21T15:39:07.552Z","publish_time":1742571547552,"_source_registry_name":"default","_cnpm_publish_time":1742571547552}},"readme":"# @rc-component/notification\n\nReact Notification UI Component\n\n[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]\n\n[npm-image]: http://img.shields.io/npm/v/@rc-component/notification.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/@rc-component/notification\n[github-actions-image]: https://github.com/react-component/notification/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/react-component/notification/actions\n[coveralls-image]: https://img.shields.io/coveralls/react-component/notification.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/notification?branch=master\n[download-image]: https://img.shields.io/npm/dm/@rc-component/notification.svg?style=flat-square\n[download-url]: https://npmjs.org/package/@rc-component/notification\n[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/notification\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/notification\n\n## Install\n\n[![@rc-component/notification](https://nodei.co/npm/@rc-component/notification.png)](https://npmjs.org/package/@rc-component/notification)\n\n## Usage\n\n```js\nimport Notification from '@rc-component/notification';\n\nNotification.newInstance({}, (notification) => {\n notification.notice({\n content: 'content',\n });\n});\n```\n\n## Compatibility\n\n| Browser | Supported Version |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |\n| [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)
Firefox](http://godban.github.io/browsers-support-badges/) | last 2 versions |\n| [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)
Chrome](http://godban.github.io/browsers-support-badges/) | last 2 versions |\n| [![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
Safari](http://godban.github.io/browsers-support-badges/) | last 2 versions |\n| [![Electron](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)
Electron](http://godban.github.io/browsers-support-badges/) | last 2 versions |\n\n## Example\n\nhttp://localhost:8001\n\nonline example: https://notification-react-component.vercel.app\n\n## API\n\n### Notification.newInstance(props, (notification) => void) => void\n\nprops details:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
nametypedefaultdescription
prefixClsStringprefix class name for notification container
styleObject{'top': 65, left: '50%'}additional style for notification container.
getContainergetContainer(): HTMLElementfunction returning html node which will act as notification container
maxCountnumbermax notices show, drop first notice if exceed limit
\n\n### notification.notice(props)\n\nprops details:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
nametypedefaultdescription
contentReact.Elementcontent of notice
keyStringid of this notice
closableBoolean | { closeIcon: ReactNode, onClose: VoidFunction }whether show close button
onCloseFunctioncalled when notice close
durationnumber | false4.5The delay for automatic closing in seconds. Set to 0 or false to not close automatically.
showProgressbooleanfalseshow with progress bar for auto-closing notification
pauseOnHoverbooleantruekeep the timer running or not on hover
styleObject { right: '50%' } additional style for single notice node.
closeIconReactNodespecific the close icon.
propsObjectAn 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.
\n\n### notification.removeNotice(key:string)\n\nremove single notice with specified key\n\n### notification.destroy()\n\ndestroy current notification\n\n## Test Case\n\n```\nnpm test\nnpm run chrome-test\n```\n\n## Coverage\n\n```\nnpm run coverage\n```\n\nopen coverage/ dir\n\n## License\n\n@rc-component/notification is released under the MIT license.\n","_attachments":{},"homepage":"http://github.com/react-component/notification","bugs":{"url":"http://github.com/react-component/notification/issues"},"license":"MIT"}