React app interface with colorful confetti animation

Confetti Carnival: Sprinkle Joy in Your React App with react-confetti

The Orange Cat
The Orange Cat

React applications often need that extra touch of excitement to celebrate user achievements or special moments. Enter react-confetti, a delightful library that brings the joy of confetti to your React projects without the real-world cleanup. This powerful yet easy-to-use package allows developers to create stunning confetti effects with minimal effort, enhancing user engagement and adding a festive flair to any React application.

Features

  • Customizable Confetti: Adjust the number, colors, and behavior of confetti pieces.
  • Responsive Design: Automatically adapts to container or window size.
  • Performance Optimized: Efficient rendering for smooth animations.
  • Easy Integration: Simple to add to existing React projects.
  • Flexible Control: Start, stop, or recycle confetti on demand.

Installation

Getting started with react-confetti is straightforward. You can install it using npm or yarn:

Using npm:

npm install react-confetti

Using yarn:

yarn add react-confetti

Basic Usage

Simple Confetti Explosion

Let’s start with a basic example of how to use react-confetti in your React application:

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

const CelebrationComponent: React.FC = () => {
  return (
    <div>
      <h1>Congratulations!</h1>
      <Confetti />
    </div>
  );
};

export default CelebrationComponent;

In this example, the Confetti component is added to the render method. By default, it will create a confetti effect that covers the entire window. The confetti animation starts automatically and continues indefinitely.

Controlled Confetti

For more control over when the confetti appears, you can use state to manage the component’s visibility:

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

const ControlledConfettiComponent: React.FC = () => {
  const [isConfettiActive, setIsConfettiActive] = useState(false);

  const triggerConfetti = () => {
    setIsConfettiActive(true);
    setTimeout(() => setIsConfettiActive(false), 5000); // Stop after 5 seconds
  };

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

export default ControlledConfettiComponent;

This setup allows you to trigger the confetti effect on demand, such as when a user clicks a button. The confetti will appear for 5 seconds before disappearing.

Advanced Usage

Customizing Confetti Behavior

react-confetti offers a wide range of props to customize the confetti effect. Let’s explore some advanced configurations:

import React from 'react';
import Confetti from 'react-confetti';
import useWindowSize from 'react-use/lib/useWindowSize';

const AdvancedConfettiComponent: React.FC = () => {
  const { width, height } = useWindowSize();

  return (
    <Confetti
      width={width}
      height={height}
      numberOfPieces={200}
      gravity={0.3}
      wind={0.05}
      colors={['#ff0000', '#00ff00', '#0000ff']}
      recycle={false}
      run={true}
    />
  );
};

export default AdvancedConfettiComponent;

In this example, we’re using the useWindowSize hook to make the confetti responsive to window resizing. We’ve also customized several properties:

  • numberOfPieces: Controls the density of the confetti.
  • gravity: Adjusts how quickly the confetti falls.
  • wind: Adds a slight horizontal movement to the confetti.
  • colors: Specifies a custom color palette for the confetti pieces.
  • recycle: When set to false, confetti pieces disappear after falling off-screen.
  • run: Controls whether the animation is active.

Custom Confetti Shapes

For even more customization, you can define your own confetti shapes using the drawShape prop:

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

const CustomShapeConfetti: React.FC = () => {
  const drawStar = (ctx: CanvasRenderingContext2D) => {
    ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(Math.cos((i * 4 * Math.PI) / 5) * 10, Math.sin((i * 4 * Math.PI) / 5) * 10);
      ctx.lineTo(Math.cos(((i + 0.5) * 4 * Math.PI) / 5) * 4, Math.sin(((i + 0.5) * 4 * Math.PI) / 5) * 4);
    }
    ctx.closePath();
    ctx.fill();
  };

  return <Confetti drawShape={drawStar} />;
};

export default CustomShapeConfetti;

This example creates star-shaped confetti by providing a custom drawing function to the drawShape prop.

Confetti Source Control

You can also control where the confetti originates from using the confettiSource prop:

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

const SourceControlledConfetti: React.FC = () => {
  return (
    <Confetti
      confettiSource={{
        x: 100,
        y: 100,
        w: 200,
        h: 10,
      }}
    />
  );
};

export default SourceControlledConfetti;

This configuration makes the confetti appear from a specific rectangle on the screen, rather than across the entire top edge.

Conclusion

The react-confetti library offers a fun and engaging way to add celebratory effects to your React applications. From simple implementations to advanced customizations, it provides developers with the tools to create unique and exciting user experiences. Whether you’re building a game, an e-commerce site, or any application that could use a touch of festivity, react-confetti is an excellent choice for bringing joy and interactivity to your projects. Experiment with different configurations, shapes, and triggers to find the perfect confetti effect for your needs, and watch as your users delight in the playful animations you create.

Comments