react-confetti-pop

Ultra lightweight, high-performance canvas confetti explosion and celebration component for React with zero dependencies.

Installation

npm install react-confetti-pop

or with yarn:

yarn add react-confetti-pop

or with pnpm:

pnpm add react-confetti-pop

Quick Start

1. Declarative Component

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

export default function Celebration() {
  const [celebrate, setCelebrate] = useState(false);

  return (
    <div>
      <button onClick={() => setCelebrate(true)}>
        Celebrate Success!
      </button>

      {/* Confetti Explosion */}
      <ConfettiPop
        active={celebrate}
        particleCount={80}
        onComplete={() => setCelebrate(false)}
      />
    </div>
  );
}

2. Imperative Function Call (popConfetti)

Trigger confetti anywhere from event handlers or API responses without adding extra component state:

import { popConfetti } from 'react-confetti-pop';

function handlePaymentSuccess() {
  popConfetti({
    particleCount: 100,
    spread: 360,
  });
}

3. Using the useConfettiPop Hook

import React from 'react';
import { useConfettiPop } from 'react-confetti-pop';

export default function App() {
  const { pop, isActive } = useConfettiPop({ particleCount: 70 });

  return (
    <button onClick={() => pop()} disabled={isActive}>
      Pop Confetti
    </button>
  );
}

Customization Examples

Side Cannon Blast

// Left Cannon
<ConfettiPop
  active={true}
  angle={60}
  spread={55}
  origin={{ x: 0, y: 1 }}
/>

// Right Cannon
<ConfettiPop
  active={true}
  angle={120}
  spread={55}
  origin={{ x: 1, y: 1 }}
/>

Custom Shapes & Colors

<ConfettiPop
  active={true}
  shapes={['star', 'heart', 'circle']}
  colors={['#FF595E', '#FFCA3A', '#8AC926', '#1982C4']}
  duration={4000}
/>

Configuration Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | active | boolean | true | Triggers the confetti animation | | particleCount | number | 60 | Number of confetti particles emitted | | angle | number | 90 | Launch angle in degrees (90 is straight up) | | spread | number | 70 | Spread angle in degrees (360 for full burst) | | force | number | 25 | Initial particle velocity | | gravity | number | 0.6 | Gravity acceleration factor | | decay | number | 0.94 | Velocity friction factor | | size | number | 8 | Particle size in pixels | | shapes | ConfettiShape[] | ['circle', 'square', 'strip'] | Array of shapes ('circle', 'square', 'star', 'heart', 'strip') | | colors | string[] | Default Palette | Array of hex or RGB color strings | | origin | { x: number, y: number } | { x: 0.5, y: 0.5 } | Launch origin point ratio (0 to 1) | | duration | number | 3000 | Duration in milliseconds | | fullScreen | boolean | true | Render as fixed full-screen overlay | | onComplete | () => void | undefined | Callback fired when explosion finishes |

License

MIT