{"id":11668,"library":"react-confetti","title":"React Confetti Component","description":"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.","status":"active","version":"6.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/alampros/react-confetti","tags":["javascript","react","confetti","component","react-component","typescript"],"install":[{"cmd":"npm install react-confetti","lang":"bash","label":"npm"},{"cmd":"yarn add react-confetti","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-confetti","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component to function.","package":"react","optional":false}],"imports":[{"note":"The main Confetti component is typically imported as a default export.","wrong":"import { Confetti } from 'react-confetti'","symbol":"Confetti","correct":"import Confetti from 'react-confetti'"},{"note":"For TypeScript users, it's best practice to use `import type` for interfaces to avoid accidental runtime imports, especially with `isolatedModules` enabled.","wrong":"import { IConfettiOptions } from 'react-confetti'","symbol":"IConfettiOptions","correct":"import type { IConfettiOptions } from 'react-confetti'"},{"note":"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.","wrong":"const Confetti = require('react-confetti');","symbol":"Confetti (CommonJS)","correct":"const Confetti = require('react-confetti').default;"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport Confetti from 'react-confetti';\n\n// A simple hook to get window dimensions for demonstration\nconst useWindowSize = () => {\n const [windowSize, setWindowSize] = useState({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n\n useEffect(() => {\n const handleResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return windowSize;\n};\n\nexport default function MyConfettiComponent() {\n const { width, height } = useWindowSize();\n const [showConfetti, setShowConfetti] = useState(true);\n\n // Stop confetti after 10 seconds for demonstration\n useEffect(() => {\n const timer = setTimeout(() => {\n setShowConfetti(false);\n }, 10000); // Confetti will stop after 10 seconds\n return () => clearTimeout(timer);\n }, []);\n\n return (\n
\n

Congratulations!

\n

This is a celebration with react-confetti.

\n {showConfetti && (\n \n )}\n \n
\n );\n}","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 6.0.0 introduced a breaking change requiring Node.js version >= 10.18. Projects running on older Node.js versions will encounter compatibility issues.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=6.2.0"},{"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.","message":"Dynamically changing certain props (like `numberOfPieces`, `confettiSource`) without enabling `tweenFrom` (introduced in v6.4.0) can result in abrupt visual transitions rather than smooth changes.","severity":"gotcha","affected_versions":">=1.0.0 <6.4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"`react-confetti` attempts to access the `window` object during server-side rendering (SSR) without appropriate checks.","error":"ReferenceError: window is not defined"},{"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.","cause":"Module resolution issues, particularly in older versions or with specific bundler configurations, might arise from ESM/CJS interop challenges.","error":"Error: Can't resolve 'react-confetti'"},{"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.","cause":"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.","error":"Confetti canvas does not resize when the browser window is resized."}],"ecosystem":"npm"}