react-confetti

What is react-confetti?

The react-confetti package is a React component that allows you to easily add confetti animations to your web applications. It is highly customizable and can be used to celebrate events, achievements, or any other occasion that calls for a festive touch.

What are react-confetti's main functionalities?

Basic Confetti Animation

This feature allows you to add a basic confetti animation to your React application with minimal setup. Simply import the Confetti component and include it in your JSX.

import React from 'react';
import Confetti from 'react-confetti';

const BasicConfetti = () => (
  <Confetti />
);

export default BasicConfetti;

Customizable Confetti

This feature allows you to customize various aspects of the confetti animation, such as the number of pieces, gravity, and colors. This makes it easy to tailor the animation to fit the theme of your application.

import React from 'react';
import Confetti from 'react-confetti';

const CustomConfetti = () => (
  <Confetti
    width={window.innerWidth}
    height={window.innerHeight}
    numberOfPieces={500}
    gravity={0.1}
    colors={['#ff0', '#f0f', '#0ff']}
  />
);

export default CustomConfetti;

Controlled Confetti

This feature allows you to control when the confetti animation is active. In this example, a button is used to toggle the confetti animation on and off, providing a more interactive experience for users.

import React, { useState } from 'react';
import Confetti from 'react-confetti';

const ControlledConfetti = () => {
  const [isConfettiActive, setIsConfettiActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsConfettiActive(!isConfettiActive)}>
        Toggle Confetti
      </button>
      {isConfettiActive && <Confetti />}
    </div>
  );
};

export default ControlledConfetti;

Other packages similar to react-confetti

canvas-confetti

canvas-confetti is a lightweight library for creating confetti animations using the HTML5 canvas element. It offers a high degree of customization and can be used in any JavaScript project, not just React. Compared to react-confetti, it requires more manual setup but offers greater flexibility.

react-particles-js

react-particles-js is a React component for creating particle animations, including confetti-like effects. It is highly customizable and can be used to create a wide range of particle animations. While it is more versatile than react-confetti, it may be more complex to set up for simple confetti animations.

react-snowfall

react-snowfall is a React component specifically designed for creating snowfall animations, but it can be customized to create confetti-like effects. It is simpler to use than react-confetti but is more limited in terms of customization options.

README

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	0
gravity	Number	0.1
initialVelocityX	Number | { min: Number, max: Number }	4	Range of values between which confetti is emitted horizontally, positive numbers being rightward, and negative numbers being leftward. Giving a number x is equivalent to giving a range { min: -x, max: x }.
initialVelocityY	Number | { min: Number, max: Number }	10	Range of values between which confetti is emitted vertically, positive numbers being downward, and negative numbers being upward. Giving a number y is equivalent to giving a range { min: -y, max: 0 }.
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()
  }}
/>