Registry / react-confetti

react-confetti

library6.4.0jsnpmunverified

react-confetti is a React component designed to easily add customizable confetti effects to web applications. It provides a declarative way to render a shower of confetti, suitable for celebrations, achievements, or any event requiring a festive visual flourish. The current stable version is 6.4.0, with the project demonstrating an active release cadence, including multiple updates in early 2025 to add features, fix bugs, and ensure compatibility with newer React versions. Key differentiators include its simplicity as a React component, comprehensive TypeScript type definitions, and highly configurable properties such as `width`, `height`, `numberOfPieces`, and `confettiSource`. It's built to run efficiently in the browser, focusing solely on the visual confetti effect without external dependencies for physics or animation beyond what React and the browser provide, making it lightweight and easy to integrate.

npm install react-confetti

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CONFETTI

react-confetti

javascriptv6.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Confetti

✓ import Confetti from 'react-confetti'

✗ import { Confetti } from 'react-confetti'

The main Confetti component is typically imported as a default export.

IConfettiOptions

✓ import type { IConfettiOptions } from 'react-confetti'

✗ import { IConfettiOptions } from 'react-confetti'

For TypeScript users, it's best practice to use `import type` for interfaces to avoid accidental runtime imports, especially with `isolatedModules` enabled.

Confetti (CommonJS)

✓ const Confetti = require('react-confetti').default;

✗ const Confetti = require('react-confetti');

When using CommonJS, explicitly accessing `.default` is the most reliable way to import the default ESM export of the component. Older versions before v6.2.2/v6.2.1 might have had CJS interop issues.

This quickstart demonstrates how to integrate `react-confetti` into a React application, dynamically adjusting to window size changes using a custom hook, and configuring various confetti properties. It also includes an example of programmatically stopping the confetti after a duration and a toggle button.

import React, { useState, useEffect } from 'react'; import Confetti from 'react-confetti'; // A simple hook to get window dimensions for demonstration const useWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight, }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return windowSize; }; export default function MyConfettiComponent() { const { width, height } = useWindowSize(); const [showConfetti, setShowConfetti] = useState(true); // Stop confetti after 10 seconds for demonstration useEffect(() => { const timer = setTimeout(() => { setShowConfetti(false); }, 10000); // Confetti will stop after 10 seconds return () => clearTimeout(timer); }, []); return ( <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}> <h1 style={{ textAlign: 'center', marginTop: '50px', color: '#673ab7' }}>Congratulations!</h1> <p style={{ textAlign: 'center', color: '#3f51b5' }}>This is a celebration with react-confetti.</p> {showConfetti && ( <Confetti width={width} height={height} numberOfPieces={500} recycle={false} // Confetti will stop falling after all pieces have fallen once tweenDuration={2000} // Smooth transition for stopping gravity={0.1} // Lighter gravity for longer fall wind={0.05} // Slight wind effect colors={['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5']} // Custom colors initialVelocityX={{ min: -10, max: 10 }} initialVelocityY={{ min: -10, max: 10 }} /> )} <button onClick={() => setShowConfetti(prev => !prev)} style={{ position: 'absolute', bottom: '20px', left: '50%', transform: 'translateX(-50%)', padding: '10px 20px', cursor: 'pointer', border: 'none', borderRadius: '5px', backgroundColor: '#3f51b5', color: 'white' }}> Toggle Confetti </button> </div> ); }

Debug

Known issues

breakingVersion 6.0.0 introduced a breaking change requiring Node.js version >= 10.18. Projects running on older Node.js versions will encounter compatibility issues.

fix

Upgrade your Node.js environment to version 10.18 or higher to meet the minimum requirement. For optimal performance and security, consider using the latest LTS version of Node.js.

affects: >=6.0.0

gotchaThe `width` and `height` props are crucial for the confetti canvas. If not explicitly provided, they default to the window's initial dimensions but will not automatically update on subsequent window resize events, leading to a fixed-size canvas.

fix

Always provide `width` and `height` props, typically by using a `useWindowSize` hook (as shown in the quickstart) or by manually tracking and passing the current dimensions of the canvas's container.

affects: >=1.0.0

gotchaThe `peerDependencies` for React are `^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0`. Using `react-confetti` with React versions outside this range may lead to peer dependency warnings or unexpected runtime behavior.

fix

Ensure your project's React version is compatible with the specified peer dependency range. Upgrade or downgrade React as necessary, or install an older version of `react-confetti` that supports your React version.

affects: >=6.2.0

gotchaDynamically changing certain props (like `numberOfPieces`, `confettiSource`) without enabling `tweenFrom` (introduced in v6.4.0) can result in abrupt visual transitions rather than smooth changes.

fix

For smooth transitions when parameters change, utilize the `tweenFrom` property available since v6.4.0. For older versions, managing the state of `numberOfPieces` or `confettiSource` more carefully to prevent jarring changes is required.

affects: >=1.0.0 <6.4.0

Errors

Common errors & fixes

ReferenceError: window is not defined

`react-confetti` attempts to access the `window` object during server-side rendering (SSR) without appropriate checks.

fix

Conditionally render the `Confetti` component only on the client-side, for example, by using `typeof window !== 'undefined'` checks or dynamic imports with `next/dynamic` or similar mechanisms.

Error: Can't resolve 'react-confetti'

Module resolution issues, particularly in older versions or with specific bundler configurations, might arise from ESM/CJS interop challenges.

fix

Ensure your build tooling (Webpack, Rollup, etc.) is correctly configured to handle both ESM and CommonJS modules. Upgrading `react-confetti` to version 6.2.2 or newer, which includes fixes for building multiple module types, often resolves these issues.

Confetti canvas does not resize when the browser window is resized.

The `width` and `height` props were not provided or are not being updated dynamically to reflect the current dimensions of the canvas's container or the window.

fix

Implement a mechanism (such as a custom `useWindowSize` hook or `ResizeObserver`) to track and pass the current `width` and `height` of the intended confetti area to the `Confetti` component props.

Upgrade

Version history

6.4.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the React component to function.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/alampros/react-confetti ↗

packagehttps://www.npmjs.com/package/react-confetti ↗