🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

react-canvas-confetti

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-canvas-confetti - npm Package Compare versions

Comparing version

1.4.0
to
2.0.0

dist/helpers/Conductor.d.ts
dist/helpers/Conductor.js
dist/presets/explosion/index.d.ts
dist/presets/explosion/index.js
dist/presets/fireworks/index.d.ts
dist/presets/fireworks/index.js
dist/presets/index.d.ts
dist/presets/index.js
dist/presets/pride/index.d.ts
dist/presets/pride/index.js
dist/presets/realistic/index.d.ts
dist/presets/realistic/index.js
dist/presets/snow/index.d.ts
dist/presets/snow/index.js
dist/types/normalization.d.ts
dist/types/types.d.ts
src/index.spec.tsx

32

dist/index.d.ts

@@ -1,28 +0,4 @@

import { CreateTypes, GlobalOptions, Options } from 'canvas-confetti';
import React, { CSSProperties } from 'react';
export interface IProps extends Options, GlobalOptions {
fire?: any;
reset?: any;
width?: string | number;
height?: string | number;
className?: string;
style?: CSSProperties;
refConfetti?: (confetti: CreateTypes | null) => void;
onDecay?: () => void;
onFire?: () => void;
onReset?: () => void;
}
export default class ReactCanvasConfetti extends React.Component<IProps> {
private refCanvas;
private confetti;
constructor(props: IProps);
componentDidMount(): void;
componentDidUpdate(prevProps: Readonly<IProps>): void;
componentWillUnmount(): void;
private setRefConfetti;
private unsetRefConfetti;
private fireConfetti;
private resetConfetti;
render(): JSX.Element;
}
//# sourceMappingURL=index.d.ts.map
import React from "react";
import { TReactCanvasConfettiProps } from "./types/types";
declare function ReactCanvasConfetti({ style, className, width, height, globalOptions, onInit, }: TReactCanvasConfettiProps): React.JSX.Element;
export default ReactCanvasConfetti;

143

dist/index.js
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {

@@ -32,74 +40,25 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var canvas_confetti_1 = __importDefault(require("canvas-confetti"));
var react_1 = __importDefault(require("react"));
var ReactCanvasConfetti = (function (_super) {
__extends(ReactCanvasConfetti, _super);
function ReactCanvasConfetti(props) {
var _this = _super.call(this, props) || this;
_this.refCanvas = react_1.default.createRef();
_this.confetti = null;
return _this;
}
ReactCanvasConfetti.prototype.componentDidMount = function () {
if (!this.refCanvas.current) {
var DEFAULT_GLOBAL_OPTIONS = {
resize: true,
useWorker: false,
};
function ReactCanvasConfetti(_a) {
var style = _a.style, className = _a.className, width = _a.width, height = _a.height, globalOptions = _a.globalOptions, onInit = _a.onInit;
var canvasRef = (0, react_1.useRef)(null);
var confetti = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
if (!canvasRef.current) {
return;
}
var _a = this.props, resize = _a.resize, useWorker = _a.useWorker;
var globalOptions = {
resize: typeof resize === 'undefined' ? true : resize,
useWorker: typeof useWorker === 'undefined' ? true : useWorker,
confetti.current = canvas_confetti_1.default.create(canvasRef.current, __assign(__assign({}, DEFAULT_GLOBAL_OPTIONS), globalOptions));
onInit === null || onInit === void 0 ? void 0 : onInit({ confetti: confetti.current });
return function () {
var _a;
(_a = confetti.current) === null || _a === void 0 ? void 0 : _a.reset();
};
this.confetti = canvas_confetti_1.default.create(this.refCanvas.current, globalOptions);
this.setRefConfetti();
};
ReactCanvasConfetti.prototype.componentDidUpdate = function (prevProps) {
var _a = this.props, fire = _a.fire, reset = _a.reset;
var isFireTrue = !!fire;
var isFireChanged = fire !== prevProps.fire;
if (isFireTrue && isFireChanged) {
this.fireConfetti();
}
var isResetTrue = !!reset;
var isResetChanged = reset !== prevProps.reset;
if (isResetTrue && isResetChanged) {
this.resetConfetti();
}
};
ReactCanvasConfetti.prototype.componentWillUnmount = function () {
this.unsetRefConfetti();
};
ReactCanvasConfetti.prototype.setRefConfetti = function () {
var refConfetti = this.props.refConfetti;
refConfetti && refConfetti(this.confetti);
};
ReactCanvasConfetti.prototype.unsetRefConfetti = function () {
var refConfetti = this.props.refConfetti;
refConfetti && refConfetti(null);
};
ReactCanvasConfetti.prototype.fireConfetti = function () {
if (!this.confetti) {
return;
}
var _a = this.props, onFire = _a.onFire, onDecay = _a.onDecay, onReset = _a.onReset, className = _a.className, style = _a.style, width = _a.width, height = _a.height, refConfetti = _a.refConfetti, fire = _a.fire, reset = _a.reset, confettiProps = __rest(_a, ["onFire", "onDecay", "onReset", "className", "style", "width", "height", "refConfetti", "fire", "reset"]);
onFire && onFire();
var promise = this.confetti(confettiProps);
promise && promise.then(function () {
onDecay && onDecay();
});
};
ReactCanvasConfetti.prototype.resetConfetti = function () {
if (!this.confetti) {
return;
}
this.confetti.reset();
var onReset = this.props.onReset;
onReset && onReset();
};
ReactCanvasConfetti.prototype.render = function () {
var _a = this.props, style = _a.style, className = _a.className, width = _a.width, height = _a.height;
return react_1.default.createElement("canvas", { ref: this.refCanvas, style: style, className: className, width: width, height: height });
};
return ReactCanvasConfetti;
}(react_1.default.Component));
}, []);
return (react_1.default.createElement("canvas", { ref: canvasRef, style: style, className: className, width: width, height: height }));
}
exports.default = ReactCanvasConfetti;
//# sourceMappingURL=index.js.map

92

package.json
{
"name": "react-canvas-confetti",
"version": "1.4.0",
"version": "2.0.0",
"description": "React component for canvas-confetti library",
"main": "dist/index.js",
"scripts": {
"build": "npm run lint && npx tsc",
"lint": "npx eslint . --ext .ts,.tsx --fix",
"build": "npm run check && rm -rf ./dist && tsc --build",
"lint": "npx eslint ./src",
"lint-fix": "npx eslint ./src --fix",
"format": "npx prettier . --write",
"check": "npm run lint && npm run format",
"prepare": "husky install",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"test": "jest",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"publish-patch": "npm run build && npm version patch && npm publish",

@@ -17,2 +21,48 @@ "publish-minor": "npm run build && npm version minor && npm publish",

},
"devDependencies": {
"@jest/globals": "^29.7.0",
"@storybook/addon-essentials": "^7.6.4",
"@storybook/addon-interactions": "^7.6.4",
"@storybook/addon-links": "^7.6.4",
"@storybook/addon-onboarding": "^1.0.10",
"@storybook/blocks": "^7.6.4",
"@storybook/react": "^7.6.4",
"@storybook/react-webpack5": "^7.6.4",
"@storybook/test": "^7.6.4",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@types/jest": "^29.5.11",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"eslint": "^8.55.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lint-staged": "^15.2.0",
"prettier": "^3.1.1",
"react-dom": "^18.2.0",
"storybook": "^7.6.4",
"ts-jest": "^29.1.1",
"typescript": "^5.3.3"
},
"lint-staged": {
"**/*": "npm run check"
},
"peerDependencies": {
"react": "*"
},
"dependencies": {
"@types/canvas-confetti": "^1.6.4",
"canvas-confetti": "^1.9.2"
},
"repository": {

@@ -28,34 +78,2 @@ "type": "git",

"homepage": "https://github.com/ulitcos/react-canvas-confetti#readme",
"devDependencies": {
"@babel/core": "7.17.2",
"@storybook/addon-actions": "6.4.19",
"@storybook/addon-essentials": "6.4.19",
"@storybook/addon-links": "6.4.19",
"@storybook/react": "6.4.19",
"@tsconfig/recommended": "1.0.1",
"@types/jest": "27.4.0",
"@types/react": "17.0.39",
"@types/react-dom": "17.0.11",
"@typescript-eslint/eslint-plugin": "5.11.0",
"@typescript-eslint/parser": "5.11.0",
"babel-loader": "8.2.3",
"eslint": "8.9.0",
"eslint-config-airbnb-typescript": "16.1.0",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"jest": "27.5.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"ts-jest": "27.1.3",
"typescript": "4.5.5"
},
"dependencies": {
"@types/canvas-confetti": "1.6.0",
"canvas-confetti": "1.6.0"
},
"peerDependencies": {
"react": "*"
},
"keywords": [

@@ -62,0 +80,0 @@ "react",

297

README.md
# [react-canvas-confetti](https://ulitcos.github.io/react-canvas-confetti/)
React component for [canvas-confetti library](https://github.com/catdad/canvas-confetti). In
the [demo example](https://ulitcos.github.io/react-canvas-confetti) you can play with the settings.
The React component for [canvas-confetti library](https://github.com/catdad/canvas-confetti). In the [demo](https://ulitcos.github.io/react-canvas-confetti) version, you can play with the settings and see examples.
[![Build Status](https://travis-ci.com/ulitcos/react-canvas-confetti.svg?branch=master)](https://travis-ci.com/ulitcos/react-canvas-confetti)
![npm](https://img.shields.io/npm/dm/react-canvas-confetti)
![NPM](https://img.shields.io/npm/l/react-canvas-confetti)
![npm](https://img.shields.io/npm/dm/react-canvas-confetti) ![NPM](https://img.shields.io/npm/l/react-canvas-confetti)

@@ -23,271 +20,67 @@ ![GIF-confetti](./pic/confetti-gif-800.gif)

:exclamation: It is expected that the [react](https://github.com/facebook/react) is already installed as peer
dependency.
:exclamation: It is expected that the [react](https://github.com/facebook/react) is already installed as peer dependency.
## Usage
I highly recommend that you first familiarize yourself with
the [canvas-confetti library](https://github.com/catdad/canvas-confetti) before using this module, as most of the
parameters are the [canvas-confetti interface](https://github.com/catdad/canvas-confetti#options).
I recommend that you first familiarize yourself with the [canvas-confetti library](https://github.com/catdad/canvas-confetti) to better understand exactly how this module works.
There are two use cases for react-canvas-confetti:
There are two ways to use this module:
<details>
<summary>
<b>1. Working with instance of canvas-confetti.</b> Get an instance of canvas-confetti using the `confetti` prop and work with it directly. With this approach, you will need to use prop confetti to get a canvas-confetti instance for subsequent work with it and <b>refuse to use props</b> <i>fire</i>, <i>reset</i>, <i>onFire</i>, <i>onDecay</i>, <i>onReset</i>. <mark>[click to show example]</mark>
</summary>
- Working with Presets (recommended)
- Working with the [canvas-confetti library](https://github.com/catdad/canvas-confetti) instance directly
````javascript
import React from 'react';
import ReactCanvasConfetti from 'react-canvas-confetti';
### Working with Presets
export default class Confetti extends React.Component {
getInstance = (instance) => {
// saving the instance to an internal property
this.confetti = instance;
}
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.
onClickDefault = () => {
// starting the animation
this.confetti();
}
#### Conductor Instance
onClickCustom = () => {
// starting the animation with custom settings
this.confetti({particleCount: Math.ceil(Math.random() * 1000), spread: 180});
}
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:
onClickCallback = () => {
// calling console.log after the animation ends
this.confetti().then(() => {
console.log('do something after animation');
});
}
```typescript
type TRunAnimationParams = {
speed: number;
duration?: number;
delay?: number;
};
onClickReset = () => {
// cleaning the canvas
this.confetti.reset();
}
type TConductorInstance = {
run: (params: TRunAnimationParams) => void;
shoot: () => void;
pause: () => void;
stop: () => void;
};
```
render() {
const style = {
position: 'fixed',
width: '100%',
height: '100%',
zIndex: -1
};
### Working with the canvas-confetti instance
return (
<>
<ReactCanvasConfetti
// set the styles as for a usual react component
style={style}
// set the class name as for a usual react component
className={'yourClassName'}
// set the callback for getting instance. The callback will be called after initialization ReactCanvasConfetti component
refConfetti={this.getInstance}
/>
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.
<button onClick={this.onClickDefault}>Fire with default</button>
<button onClick={this.onClickCustom}>Fire with custom</button>
<button onClick={this.onClickCallback}>Fire with callback</button>
<button onClick={this.onClickReset}>Reset</button>
</>
);
}
}
#### Canvas-confetti instance
````
[Confetti object](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#confettioptions-object--promisenull), which will be received as a result of calling the [function create](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#confetticreatecanvas-globaloptions--function). Gives you full control to create your own animations. Confetti can be accessed in the `onInit` callback. The interface can be viewed [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/canvas-confetti/index.d.ts#L173)
</details>
<details>
<summary>
<b>2. Working with props of react-canvas-confetti.</b> Control the component by throwing all the props from above. With this approach, you don't need to work with the canvas-confetti instance directly. You can organize all the logic through a <b>set of props</b> <i>fire</i>, <i>reset</i>, <i>onFire</i>, <i>onDecay</i>, <i>onReset</i>. <mark>[click to show example]</mark>
</summary>
````javascript
import React from 'react';
import ReactCanvasConfetti from 'react-canvas-confetti';
export default class Confetti extends React.Component {
constructor() {
super();
this.state = {
fire: false,
reset: false
}
}
onClickFire = () => {
// set any value that is cast to the logical true and will differ from the previous one.
this.setState({fire: {}});
}
onClickReset = () => {
// set any value that is cast to the logical true and will differ from the previous one.
this.setState({reset: {}});
}
onFire = () => {
console.log('do something after fire')
}
onReset = () => {
console.log('do something after reset')
}
onDecay = () => {
console.log('do something after animation')
}
render() {
const style = {
position: 'fixed',
width: '100%',
height: '100%',
zIndex: -1
};
return (
<>
<ReactCanvasConfetti
// set the styles as for a usual react component
style={style}
// set the class name as for a usual react component
className={'yourClassName'}
// if value in this.state.fire cast to the logical true and will differ from the previous, then will be called new animation
fire={this.state.fire}
// if value in this.state.reset cast to the logical true and will differ from the previous, then will be cleared canvas
reset={this.state.reset}
// set the callback on new animation
onFire={this.onFire}
// set the callback on decay animation
onDecay={this.onDecay}
// set the callback on reset canvas
onReset={this.onReset}
/>
<button onClick={this.onClickFire}>Fire</button>
<button onClick={this.onClickReset}>Reset</button>
</>
);
}
}
````
</details>
## API
### Component props
### Base API
`confetti: (confetti: CreateTypes | null) => void` - callback for getting the canvas-confetti instance into the parent
component (see the first use case).
The common settings are relevant for all use cases
`fire: any` - prop for firing the animation, can be any data type set to Boolean true and different from the previous
value. Starting a new animation does not cancel the old one!
| 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 |
| globalOptions | [TGlobalOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/canvas-confetti/index.d.ts#L126) | global animation settings that cannot be changed after initialization ([details](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#confetticreatecanvas-globaloptions--function)) |
| onInit | (params: {confetti: [TCanvasConfettiInstance](#canvas-confetti-instance)}) => void | the callback is called when the component is mounted on the page and allows you to access confetti instance ([details](https://github.com/catdad/canvas-confetti?tab=readme-ov-file#confettioptions-object--promisenull)) for manual animation creation |
`reset: any` - prop for resetting all animations at once, can be any kind of data that casts to boolean true and differs
from the previous value.
### Advanced API
`width: string | number` - prop is responsible for the width of the canvas. Alternative ways to control canvas sizes are
className and style props.
Advanced settings only work for presets!
`height: string | number` - prop is responsible for the height of the canvas. Alternative ways to control canvas sizes
are className and style props.
`className: string` - prop to set className to canvas element
`style: CSSProperties` - prop to set style to canvas element
`onFire: () => void` - callback on start animation
`onDecay: () => void` - callback on finish animation
`onReset: () => void` - callback on resetting all animations
### Canvas-confetti props ([more details](https://github.com/catdad/canvas-confetti#options))
`particleCount: number (default: 50)` - the number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.
`angle: number (default: 90)` - the angle in which to launch the confetti, in degrees. 90 is straight up.
`spread: number (default: 45)` - how far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.
`startVelocity: number (default: 45)` - how fast the confetti will start going, in pixels.
`decay: number (default: 0.9)` - how quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.
`gravity: number (default: 1)` - how quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.
`drift: number (default: 0)` - how much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.
`ticks: number (default: 200)` - how many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.
`origin: { x: number, y: number }` - where to start firing confetti from. Feel free to launch off-screen if you'd like.
`origin.x: number (default: 0.5)` - the x position on the page, with 0 being the left edge and 1 being the right edge.
`origin.y: number (default: 0.5)` - the y position on the page, with 0 being the top edge and 1 being the bottom edge.
`colors: Array<String>` - an array of color strings, in the HEX format... you know, like #bada55.
`shapes: Array<String>` - an array of shapes for the confetti. The possible values are square, circle, and star. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the array, such as ['star']. You can also change the mix by providing a value such as ['circle', 'circle', 'square'] to use two third circles and one third squares.
`scalar: number (default: 1)` - scale factor for each confetti particle. Use decimals to make the confetti smaller. Go
on, try teeny tiny confetti, they are adorable!
`zIndex: number (default: 100)` - the confetti should be on top, after all. But if you have a crazy high page, you can
set it even higher.
`disableForReducedMotion: boolean (default: false)` - disables confetti entirely for users that prefer reduced motion.
The confetti() promise will resolve immediately in this case.
`resize: boolean (default: true)` - whether to allow setting the canvas image size, as well as keep it correctly sized
if the window changes size (e.g. resizing the window, rotating a mobile device, etc.). By default, the canvas size will
not be modified.
`useWorker: boolean (default: true)` - whether to use an asynchronous web worker to render the confetti animation,
whenever possible. This is turned off by default, meaning that the animation will always execute on the main thread. If
turned on and the browser supports it, the animation will execute off of the main thread so that it is not blocking any
other work your page needs to do. Using this option will also modify the canvas, but more on that directly below -- do
read it. If it is not supported by the browser, this value will be ignored.
## Examples
You can see live examples in the [storybook](https://ulitcos.github.io/react-canvas-confetti/).
<details>
<summary>Fireworks</summary>
↳ [Functional component example](https://codesandbox.io/s/fireworks-fn-react-canvas-confetti-w594u?file=/src/App.js)
↳ [Class component example](https://codesandbox.io/s/fireworks-cl-react-canvas-confetti-7sgr9?file=/src/App.js)
</details>
<details>
<summary>Realistic</summary>
↳ [Functional component example](https://codesandbox.io/s/realistic-fn-react-canvas-confetti-2o3pe)
↳ [Class component example](https://codesandbox.io/s/realistic-cl-react-canvas-confetti-kle35)
</details>
<details>
<summary>School Pride</summary>
↳ [Functional component example](https://codesandbox.io/s/school-pride-fn-react-canvas-confetti-10l9n)
↳ [Class component example](https://codesandbox.io/s/school-pride-cl-react-canvas-confetti-93g4v)
</details>
<details>
<summary>Snow</summary>
↳ [Functional component example](https://codesandbox.io/s/snow-fn-react-canvas-confetti-i3y7w)
↳ [Class component example](https://codesandbox.io/s/snow-cl-react-canvas-confetti-0eoqb)
</details>
| 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](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/canvas-confetti/index.d.ts#L39)) => [TOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/canvas-confetti/index.d.ts#L39) | the callback allows you to customize the animation settings and is called for each step of the animation |
| onInit | (params: { confetti: [TCanvasConfettiInstance](#canvas-confetti-instance); conductor: [TConductorInstance](#conductor-instance) }) => 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 |
dist/index.d.ts.map
dist/index.js.map
LICENSE
src/index.tsx

Sorry, the diff of this file is not supported yet