Gathering detailed insights and metrics for react-canvas-confetti
Gathering detailed insights and metrics for react-canvas-confetti
Installations
npm install react-canvas-confettiDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.11.1
NPM Version
10.2.4
Score
97.9
Supply Chain
100
Quality
76.1
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
4
TypeScript
JavaScript
CSS
Shell
TypeScript (81.69%)
JavaScript (16.18%)
CSS (1.98%)
Shell (0.15%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
240 Stars
98 Commits
16 Forks
1 Watchers
4 Branches
4 Contributors
Updated on May 10, 2025
Maintainers
1
Package Meta Information
Latest Version
2.0.7
Package Id
react-canvas-confetti@2.0.7
Unpacked Size
73.68 kB
Size
11.73 kB
File Count
66
NPM Version
10.2.4
Node Version
20.11.1
Published on
Mar 08, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
Dev Dependencies
34
@jest/globals@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/addon-onboarding@storybook/blocks@storybook/react@storybook/react-webpack5@storybook/test@testing-library/jest-dom@testing-library/react@types/jest@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parsereslinteslint-config-airbnbeslint-config-airbnb-typescripteslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookshuskyjestjest-environment-jsdomlint-stagedprettierreact-domstorybookts-jesttypescript
react-canvas-confetti
The React component for canvas-confetti library. In the demo version, you can play with the settings and see examples.
Installation
1npm i react-canvas-confetti
:exclamation: It is expected that the react is already installed as peer dependency.
Usage
I recommend that you first familiarize yourself with the canvas-confetti library to better understand exactly how this module works.
There are two ways to use this module:
- Working with Presets (recommended)
- Working with the canvas-confetti library instance directly
Working with Presets
A preset is an animation template that is already ready to use. Presets allow you to customize animation settings, but do not allow you to change the animation algorithm. Using presets is an easier way to work with the module.
An example of the minimum required code:
1import Fireworks from "react-canvas-confetti/dist/presets/fireworks"; 2 3function Example() { 4 return <Fireworks autorun={{ speed: 3 }} />; 5} 6 7export default Example;
Conductor Instance
The preset working can be controlled manually using the Conductor instance. This object allows you to start and stop animations on demand. Conductor can be accessed in the onInit callback. The interface of the object is shown below:
1type TRunAnimationParams = { 2 speed: number; 3 duration?: number; 4 delay?: number; 5}; 6 7type TConductorInstance = { 8 run: (params: TRunAnimationParams) => void; 9 shoot: () => void; 10 pause: () => void; 11 stop: () => void; 12};
Working with the canvas-confetti instance
Working with an instance is working with the module at a lower level. This is a more powerful approach that allows you to create your own animation algorithms, but requires more effort.
Canvas-confetti instance
Confetti object, which will be received as a result of calling the function create. Gives you full control to create your own animations. Confetti can be accessed in the onInit callback. The interface can be viewed here
API
Base API
The common settings are relevant for all use cases
| Name | Type | Description |
|---|---|---|
| width | string | number | value is responsible for the width of the canvas. Alternative ways to control canvas sizes are className and style props. |
| height | string | number | value is responsible for the height of the canvas. Alternative ways to control canvas sizes are className and style props. |
| className | string | value to set className to canvas element |
| style | CSSProperties | value to set style to canvas element. If style and className are not passed, the default styles will be set |
| globalOptions | TGlobalOptions | global animation settings that cannot be changed after initialization (details) |
| onInit | (params: {confetti: TCanvasConfettiInstance}) => void | the callback is called when the component is mounted on the page and allows you to access confetti instance (details) for manual animation creation |
Advanced API
Advanced settings only work for presets!
| Name | Type | Description |
|---|---|---|
| autorun | { speed: number; duration?: number; delay?: number; } | if it is passed, it automatically starts the animation when mounting the component on the page |
| decorateOptions | (options: TOptions) => TOptions | the callback allows you to customize the animation settings and is called for each step of the animation |
| onInit | (params: { confetti: TCanvasConfettiInstance; conductor: TConductorInstance }) => void | the callback is called when the component is mounted on the page and allows you to access objects for manual creation and animation control |
Examples
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
22 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2025-05-05
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