React component to draw confetti for your party

React component to draw confetti for your party

Confetti without the cleanup.


Build Status npm

Confetti without the cleanup. Demo

Based on a pen by @Gthibaud:



npm install react-confetti


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'
import Confetti from 'react-confetti'

export default () => {
  const { width, height } = useWindowSize()
  return (


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 0
gravity Number 0.1
colors String[] ['#f44336'
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


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:

  drawShape={ctx => {
    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)

Github Repository