React Confetti Component

Common errors

• ReferenceError: window is not defined

  cause `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'

  cause 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.

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-confetti npm
• yarn add react-confetti yarn
• pnpm add react-confetti pnpm

Imports

• Confetti
  wrong:

  import { Confetti } from 'react-confetti'

  correct:

  import Confetti from 'react-confetti'

  The main Confetti component is typically imported as a default export.
• IConfettiOptions
  wrong:

  import { IConfettiOptions } from 'react-confetti'

  correct:

  import type { 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)
  wrong:

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

  correct:

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

  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.

Quickstart

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>
  );
}