# confetti-react > React component to draw confetti for your party. Latest version **2.6.0** (published 2024-07-24) · MIT license · 0 weekly downloads ## Install ```sh npm install confetti-react pnpm add confetti-react yarn add confetti-react bun add confetti-react ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.6.0 | | Published | 2024-07-24 | | First published | 2020-03-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 143.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 13 | | Author | Gthibaud, Aaron Lampros, Robert Kuykendall | | Maintainers | rkuykendall | | Keywords | component, confetti, react, react-component | ## Links - npm: https://www.npmjs.com/package/confetti-react - Repository: https://github.com/rkuykendall/confetti-react - Homepage: https://github.com/rkuykendall/confetti-react#readme - Issues: https://github.com/rkuykendall/confetti-react/issues - npm.io page: https://npm.io/package/confetti-react ## Dependencies (1) - [tween-functions](https://npm.io/package/tween-functions.md) ^1.2.0 ## 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.6.0 (latest) — 2024-07-24 - 2.5.0 — 2021-04-01 - 2.4.4 — 2020-03-14 - 2.4.3 — 2020-03-14 - 2.4.2 — 2020-03-14 ## README This is a fork of [react-confetti](https://github.com/alampros/react-confetti) which was created when that library was unsupported and the latest release was completely broken. It is my understanding that the original library is once again actively maintained. This fork has cleaner builds, but is not as active. For live examples and demo's of this code, you can reference the [react-confetti live documentation](https://alampros.github.io/react-confetti/). # confetti-react Confetti without the cleanup. [![Build Status](https://travis-ci.org/rkuykendall/confetti-react.svg?branch=master)](https://travis-ci.org/rkuykendall/confetti-react) [![npm](https://img.shields.io/npm/v/confetti-react.svg)](https://www.npmjs.com/package/confetti-react) [![npm bundle size](https://img.shields.io/bundlephobia/min/confetti-react.svg)](https://bundlephobia.com/result?p=confetti-react) ![npm type definitions](https://img.shields.io/npm/types/confetti-react.svg) Based on a pen by @Gthibaud: https://codepen.io/Gthibaud/pen/ENzXbp [![demogif][2]][1] [1]: http://rkuykendall.github.com/confetti-react [2]: https://user-images.githubusercontent.com/796717/113315634-7d24f800-92db-11eb-9a01-4c83413a5756.png 'demo gif' ## Install ```sh npm install confetti-react ``` ## Use `width` and `height` props are recommended. They will default to the initial window dimensions, but will not respond to resize events. It is recommended to provide the dimensions yourself. Here is an example using [a hook](https://github.com/streamich/react-use/blob/master/docs/useWindowSize.md): ```jsx import React from 'react'; import useWindowSize from 'react-use/lib/useWindowSize'; import Confetti from 'confetti-react'; export default () => { const { width, height } = useWindowSize(); return ; }; ``` ## Props | Property | Type | Default | Description | | -------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | `width` | `Number` | `window.innerWidth \|\| 300` | Width of the `` element. | | `height` | `Number` | `window.innerHeight \|\| 200` | Height of the `` element. | | `numberOfPieces` | `Number` | 200 | Number of confetti pieces at one time. | | `confettiSource` | `{ x: Number, y: Number, w: Number, h: Number }` | `{x: 0, y: 0, w: canvas.width, h:0}` | Rectangle where the confetti should spawn. Default is across the top. | | `friction` | `Number` | 0.99 | | | `wind` | `Number` | 0 | | | `gravity` | `Number` | 0.1 | | | `initialVelocityX` | `Number` | 4 | How fast confetti is emitted horizontally | | `initialVelocityY` | `Number` | 10 | How fast confetti is emitted vertically | | `colors` | `String[]` | `['#f44336'`
`'#e91e63'`
`'#9c27b0'`
`'#673ab7'`
`'#3f51b5'`
`'#2196f3'`
`'#03a9f4'`
`'#00bcd4'`
`'#009688'`
`'#4CAF50'`
`'#8BC34A'`
`'#CDDC39'`
`'#FFEB3B'`
`'#FFC107'`
`'#FF9800'`
`'#FF5722'`
`'#795548']`
| All available Colors for the confetti pieces. | | `opacity` | `Number` | 1.0 | | | `recycle` | `Bool` | true | Keep spawning confetti after `numberOfPieces` pieces have been shown. | | `run` | `Bool` | true | Run the animation loop | | `tweenDuration` | `Number` | 5000 | How fast the confetti is added | | `tweenFunction` | `(currentTime: number, currentValue: number, targetValue: number, duration: number, s?: number) => number` | easeInOutQuad | See [tween-functions](https://github.com/chenglou/tween-functions) | | `drawShape` | `(context: CanvasRenderingContext2D) => void` | `undefined` | See below | | `onConfettiComplete` | `(confetti: Confetti) => void` | `undefined` | Called when all confetti has fallen off-canvas. | # `drawShape()` Draw a custom shape for a particle. If not provided, defaults to a random selection of a square, circle or strip confetto. The function is called with the canvas context as a parameter and the [Particle](src/Particle.ts) as the `this` context. For example, to draw all spirals: ```jsx { ctx.beginPath(); for (let i = 0; i < 22; i++) { const angle = 0.35 * i; const x = (0.2 + 1.5 * angle) * Math.cos(angle); const y = (0.2 + 1.5 * angle) * Math.sin(angle); ctx.lineTo(x, y); } ctx.stroke(); ctx.closePath(); }} /> ``` --- _Source: https://npm.io/package/confetti-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._