Installations

npm install rc-notification

Pull Requests

Open

11

Total

314

Closed

225

Merged

78

Issues

Open

20

Total

47

Closed

27

Releases

48

v5.6.2

Published on 27 Sept 2024

v5.6.1

Published on 16 Sept 2024

v5.6.0

Published on 22 May 2024

v5.5.0

Published on 11 May 2024

v5.4.0

Published on 04 Mar 2024

v5.3.0

Published on 23 Oct 2023

View all 48 releases

Developer

react-component

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=8.x

Typescript Support

No

Node Version

18.18.2

NPM Version

9.8.1 Statistics

380 Stars

240 Commits

105 Forks

25 Watching

17 Branches

46 Contributors

Updated on 27 Sept 2024

Bundle Size

29.81 kB

Minified

11.00 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (90.02%)

Less (8.73%)

JavaScript (1.13%)

Shell (0.12%)

Total Downloads

Cumulative downloads

Total Downloads

214,439,441

Last day

-1.5%

264,995

Compared to previous day

Last week

3.2%

1,476,454

Compared to previous week

Last month

5.8%

6,126,285

Compared to previous month

Last year

22.7%

62,892,077

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

4

@babel/runtime classnames rc-motion rc-util

Peer Dependencies

2

react react-dom

Dev Dependencies

24

Versions

rc-notification

React Notification UI Component

Install

Usage

1import Notification from 'rc-notification';
2
3Notification.newInstance({}, notification => {
4  notification.notice({
5    content: 'content'
6  });
7});

Compatibility

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

3

Maintained

Determines if the project is "actively maintained".

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

4.5

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More