# react-canvas-confetti > React component for canvas-confetti library Latest version **2.0.7** (published 2024-03-08) · MIT license · 0 weekly downloads ## Install ```sh npm install react-canvas-confetti pnpm add react-canvas-confetti yarn add react-canvas-confetti bun add react-canvas-confetti ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.7 | | Published | 2024-03-08 | | First published | 2020-12-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 73.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 262 | | Author | Ruslan Krokhin | | Maintainers | ulitcos | | Keywords | react, canvas, confetti, animation, burst, fireworks, snow, particles | ## Links - npm: https://www.npmjs.com/package/react-canvas-confetti - Repository: https://github.com/ulitcos/react-canvas-confetti - Homepage: https://github.com/ulitcos/react-canvas-confetti#readme - Issues: https://github.com/ulitcos/react-canvas-confetti/issues - npm.io page: https://npm.io/package/react-canvas-confetti ## Dependencies (2) - [canvas-confetti](https://npm.io/package/canvas-confetti.md) ^1.9.2 - [@types/canvas-confetti](https://npm.io/package/@types/canvas-confetti.md) ^1.6.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.7 (latest) — 2024-03-08 - 2.0.6 — 2024-03-08 - 2.0.5 — 2024-01-08 - 2.0.4 — 2024-01-08 - 2.0.3 — 2024-01-07 - 2.0.2 — 2024-01-07 - 2.0.1 — 2024-01-05 - 2.0.0 — 2024-01-05 - 1.4.0 — 2023-03-27 - 1.3.0 — 2022-02-13 - 1.2.1 — 2021-07-21 - 1.2.0 — 2021-03-23 - 1.1.3 — 2021-03-17 - 1.1.2 — 2021-03-07 - 1.1.1 — 2021-02-23 - … 5 more at https://npm.io/package/react-canvas-confetti/versions ## README # [react-canvas-confetti](https://ulitcos.github.io/react-canvas-confetti/) 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. ![npm](https://img.shields.io/npm/dm/react-canvas-confetti) ![NPM](https://img.shields.io/npm/l/react-canvas-confetti) ![GIF-confetti](./pic/confetti-gif-800.gif) - [Installation](#Installation) - [Usage](#Usage) - [API](#API) - [Examples](#Examples) ## Installation ```bash npm i react-canvas-confetti ``` :exclamation: It is expected that the [react](https://github.com/facebook/react) is already installed as peer dependency. ## Usage 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 ways to use this module: - Working with Presets (recommended) - Working with the [canvas-confetti library](https://github.com/catdad/canvas-confetti) 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: ```typescript import Fireworks from "react-canvas-confetti/dist/presets/fireworks"; function Example() { return ; } export default Example; ``` [Live example](https://codepen.io/ulitcos/pen/gOEEXKe)
#### 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: ```typescript type TRunAnimationParams = { speed: number; duration?: number; delay?: number; }; type TConductorInstance = { run: (params: TRunAnimationParams) => void; shoot: () => void; pause: () => void; stop: () => void; }; ``` ### 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](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) ## 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](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 | ### 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](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 | ## Examples [Fireworks Preset](https://codepen.io/ulitcos/pen/gOEEXKe) [Crossfire Preset](https://codepen.io/ulitcos/pen/MWxxOLW) [Snow Preset](https://codepen.io/ulitcos/pen/rNRRYRO) [Realistic Preset](https://codepen.io/ulitcos/pen/zYbbPXB) [Explosion Preset](https://codepen.io/ulitcos/pen/rNRRYgx) [Pride Preset](https://codepen.io/ulitcos/pen/qBvvVGm) [Vortex Preset](https://codepen.io/ulitcos/pen/XWQXZyP) [Photons Preset](https://codepen.io/ulitcos/pen/xxeZJjG) [Manual Control](https://codepen.io/ulitcos/pen/eYXXewp) [Decorating Options](https://codepen.io/ulitcos/pen/gOEEoYd) [Custom Stylization](https://codepen.io/ulitcos/pen/rNRRpVL) [Custom Animation](https://codepen.io/ulitcos/pen/eYXabaz) --- _Source: https://npm.io/package/react-canvas-confetti · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._