react-confetti
Confetti without the cleanup. Demo
Based on a pen by @Gthibaud: https://codepen.io/Gthibaud/pen/ENzXbp
Install
npm install react-confetti
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:
import React from 'react'
import useWindowSize from 'react-use/lib/useWindowSize'
import Confetti from 'react-confetti'
export default () => {
const { width, height } = useWindowSize()
return (
<Confetti
width={width}
height={height}
/>
)
}
Props, Property, Type, Default, Description, ----------------, ---------------------, ---, ---, width, Number, window.innerWidth \, \, 300, Width of the <canvas> element., height, Number, window.innerHeight \, \, 200, Height of the <canvas> 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, 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, 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 as the this context.
For example, to draw all spirals:
<Confetti
drawShape={ctx => {
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()
}}
/>