### Install react-confetti

Source: https://github.com/alampros/react-confetti/blob/develop/README.md

Use npm to install the react-confetti package.

```sh
npm install react-confetti
```

--------------------------------

### Basic Confetti Usage with Window Size Hook

Source: https://github.com/alampros/react-confetti/blob/develop/README.md

This example demonstrates how to use react-confetti with the `useWindowSize` hook from `react-use` to dynamically set the confetti dimensions based on the window size. Ensure you have `react-use` installed if you plan to use this hook.

```jsx
import React from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

export default () => {
  const { width, height } = useWindowSize()
  return (
    <Confetti
      width={width}
      height={height}
    />
  )
}
```

--------------------------------

### Draw Custom Spiral Shape with React Confetti

Source: https://github.com/alampros/react-confetti/blob/develop/README.md

Use the `drawShape` prop to provide a function that draws a custom particle shape. This example draws a spiral shape using canvas drawing methods. The function receives the canvas context and has the particle as its `this` context.

```jsx
<Confetti
  drawShape={ctx => {
    ctx.beginPath()
    for(let i = 0; i < 22; i++) {
      const angle = 0.35 * i
      const x = (0.2 + (1.5 * angle)) * Math.cos(angle)
      const y = (0.2 + (1.5 * angle)) * Math.sin(angle)
      ctx.lineTo(x, y)
    }
    ctx.stroke()
    ctx.closePath()
  }}
/>
```

--------------------------------

### Basic React Confetti Usage

Source: https://context7.com/alampros/react-confetti/llms.txt

Import and render the default Confetti component with window dimensions for full-screen effects. Recommended to use with the `useWindowSize` hook for dynamic sizing.

```jsx
import React from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

export default function CelebrationPage() {
  const { width, height } = useWindowSize()

  return (
    <div>
      <h1>Congratulations!</h1>
      <Confetti
        width={width}
        height={height}
      />
    </div>
  )
}
```

--------------------------------

### Set Easing Function for Particle Spawning

Source: https://context7.com/alampros/react-confetti/llms.txt

Defines the easing function that controls the rate of particle spawning. Default is `easeInOutQuad`. Custom easing logic can be provided.

```jsx
import Confetti from 'react-confetti'
import { linear, easeOutQuad, easeInOutCubic } from 'tween-functions'

// Linear spawning (constant rate)
<Confetti tweenFunction={linear} />

// Fast start, slow finish
<Confetti tweenFunction={easeOutQuad} />

// Custom easing function
<Confetti
  tweenFunction={(currentTime, currentValue, targetValue, duration) => {
    // Custom easing logic
    return currentValue + (targetValue - currentValue) * (currentTime / duration)
  }}
/>
```

--------------------------------

### Configure Confetti Canvas Width

Source: https://context7.com/alampros/react-confetti/llms.txt

Set a fixed width for the confetti canvas or use the `useWindowSize` hook for full viewport width. Defaults to window.innerWidth or 300 if the window is unavailable.

```jsx
import Confetti from 'react-confetti'

// Fixed width confetti area
<Confetti width={800} height={600} />
```

```jsx
import { useWindowSize } from 'react-use'

function App() {
  const { width, height } = useWindowSize()
  return <Confetti width={width} height={height} />
}
```

--------------------------------

### Set Duration for Spawning Particles

Source: https://context7.com/alampros/react-confetti/llms.txt

Controls the duration in milliseconds for spawning all `numberOfPieces` particles. Default is 5000ms.

```jsx
import Confetti from 'react-confetti'

// Rapid burst (all particles in 1 second)
<Confetti tweenDuration={1000} numberOfPieces={200} />

// Slow build-up (particles spawn over 10 seconds)
<Confetti tweenDuration={10000} numberOfPieces={200} />
```

--------------------------------

### Set Initial Velocity X

Source: https://context7.com/alampros/react-confetti/llms.txt

Define the horizontal emission speed of particles. Can be a single number (creating a range from -number to +number) or an object with `min` and `max` properties. Default is 4.

```jsx
import Confetti from 'react-confetti'

// Symmetric horizontal spread (number creates range from -4 to 4)
<Confetti initialVelocityX={4} />
```

```jsx
// Custom asymmetric range (particles go mostly right)
<Confetti initialVelocityX={{ min: 0, max: 10 }} />
```

```jsx
// Narrow horizontal spread
<Confetti initialVelocityX={1} />
```

--------------------------------

### Set Initial Velocity Y

Source: https://context7.com/alampros/react-confetti/llms.txt

Define the vertical emission speed of particles. Can be a single number (creating a range from -number to 0 for upward) or an object with `min` and `max` properties. Default is 10.

```jsx
import Confetti from 'react-confetti'

// Standard upward burst (number creates range from -10 to 0)
<Confetti initialVelocityY={10} />
```

```jsx
// Explosive upward burst
<Confetti initialVelocityY={{ min: -20, max: -5 }} />
```

```jsx
// Downward emission (rain-like)
<Confetti initialVelocityY={{ min: 0, max: 5 }} />
```

--------------------------------

### Mouse-Following Confetti

Source: https://context7.com/alampros/react-confetti/llms.txt

Confetti that follows the mouse cursor position. Uses react-use hooks for mouse and window size. Set confettiSource to control the origin.

```jsx
import React, { useRef } from 'react'
import { useWindowSize } from 'react-use'
import useMouse from 'react-use/lib/useMouse'
import Confetti from 'react-confetti'

function MouseFollowConfetti() {
  const containerRef = useRef(null)
  const { docX } = useMouse(containerRef)
  const { width, height } = useWindowSize()

  const confettiProps = docX ? {
    confettiSource: {
      x: docX - 25,
      y: -10,
      w: 50,
      h: 0
    },
    run: true
  } : {
    run: false
  }

  return (
    <div ref={containerRef} style={{ minHeight: '100vh' }}>
      <p style={{ textAlign: 'center', padding: '20px' }}>
        Move your mouse to create confetti!
      </p>
      <Confetti
        width={width}
        height={height}
        numberOfPieces={100}
        gravity={0.5}
        style={{ pointerEvents: 'none' }}
        {...confettiProps}
      />
    </div>
  )
}
```

--------------------------------

### React Confetti Component Properties

Source: https://github.com/alampros/react-confetti/blob/develop/README.md

Configuration options for the react-confetti component.

```APIDOC
## React Confetti Component Properties

### Description
This section details the configurable properties for the react-confetti component, allowing for customization of its appearance and behavior.

### Properties

#### `initialVelocityY`
- **Type**: `Number` | `{ min: Number, max: Number }`
- **Default**: `10`
- **Description**: Range of values between which confetti is emitted vertically. Positive numbers indicate downward emission, and negative numbers indicate upward emission. Providing a single number `y` is equivalent to providing a range `{ min: -y, max: 0 }`.

#### `colors`
- **Type**: `String[]`
- **Default**: `['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548']`
- **Description**: An array of all available colors for the confetti pieces.

#### `opacity`
- **Type**: `Number`
- **Default**: `1.0`
- **Description**: The opacity of the confetti pieces.

#### `recycle`
- **Type**: `Bool`
- **Default**: `true`
- **Description**: Determines whether to continue spawning confetti after the initial `numberOfPieces` have been shown.

#### `run`
- **Type**: `Bool`
- **Default**: `true`
- **Description**: Controls whether the animation loop runs. Set to `false` to pause the animation.

#### `frameRate`
- **Type**: `Number` | `undefined`
- **Default**: `undefined`
- **Description**: The capped frame rate of the animation. If `undefined`, the browser's default frame rate is used.

#### `tweenDuration`
- **Type**: `Number`
- **Default**: `5000`
- **Description**: Specifies how fast the confetti is added to the animation, in milliseconds.

#### `tweenFunction`
- **Type**: `(currentTime: number, currentValue: number, targetValue: number, duration: number, s?: number) => number`
- **Default**: `easeInOutQuad`
- **Description**: A function that defines the easing curve for the confetti animation. Refer to [tween-functions](https://github.com/chenglou/tween-functions) for available options.

#### `drawShape`
- **Type**: `(context: CanvasRenderingContext2D) => void`
- **Default**: `undefined`
- **Description**: A custom function to draw the shape of the confetti pieces. It receives the 2D canvas rendering context as an argument.

#### `onConfettiComplete`
- **Type**: `(confetti: Confetti) => void`
- **Default**: `undefined`
- **Description**: A callback function that is executed when all confetti pieces have fallen off the canvas.
```

--------------------------------

### Create Snow Effect with Custom Shapes

Source: https://context7.com/alampros/react-confetti/llms.txt

Use the drawShape prop to create a continuous snow effect with custom snowflake shapes and physics. Requires react-use for window size.

```jsx
import React from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

function SnowEffect() {
  const { width, height } = useWindowSize()

  const drawSnowflake = function(ctx) {
    const numPoints = this.numPoints || 6
    this.numPoints = numPoints
    const innerRadius = this.radius * 0.2
    const outerRadius = this.radius * 0.8

    ctx.beginPath()
    ctx.moveTo(0, -outerRadius)

    for (let n = 1; n < numPoints * 2; n++) {
      const radius = n % 2 === 0 ? outerRadius : innerRadius
      const x = radius * Math.sin((n * Math.PI) / numPoints)
      const y = -radius * Math.cos((n * Math.PI) / numPoints)
      ctx.lineTo(x, y)
    }
    ctx.fill()
    ctx.stroke()
    ctx.closePath()
  }

  return (
    <Confetti
      width={width}
      height={height}
      numberOfPieces={100}
      gravity={0.03}
      wind={0.01}
      colors={['#AEE1FF', '#CBDDF8', '#FFFFFF', '#E8F4FF']}
      drawShape={drawSnowflake}
      recycle={true}
    />
  )
}
```

--------------------------------

### Set Global Opacity for Confetti

Source: https://context7.com/alampros/react-confetti/llms.txt

Adjust the transparency of all confetti particles. Default is 1.0 (fully opaque).

```jsx
import Confetti from 'react-confetti'

// Semi-transparent confetti
<Confetti opacity={0.6} />

// Very subtle confetti
<Confetti opacity={0.3} />
```

--------------------------------

### Control Confetti Animation Loop

Source: https://context7.com/alampros/react-confetti/llms.txt

Set `run` to false to pause or stop the confetti animation. Default is true.

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

function PausableConfetti() {
  const [isRunning, setIsRunning] = useState(true)

  return (
    <div>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? 'Pause' : 'Resume'}
      </button>
      <Confetti run={isRunning} />
    </div>
  )
}
```

--------------------------------

### Set Frame Rate Cap for Confetti Animation

Source: https://context7.com/alampros/react-confetti/llms.txt

Optionally cap the frame rate for performance optimization. `undefined` means no cap (default behavior).

```jsx
import Confetti from 'react-confetti'

// Cap at 30fps for better performance on slower devices
<Confetti frameRate={30} />

// Cap at 60fps
<Confetti frameRate={60} />

// No cap (default behavior)
<Confetti frameRate={undefined} />
```

--------------------------------

### One-Time Celebration Button Pattern

Source: https://context7.com/alampros/react-confetti/llms.txt

Implement a one-time confetti celebration triggered by user actions, such as completing a task. This pattern uses state to control the confetti's visibility and `onConfettiComplete` to reset the state.

```jsx
import React, { useState, useCallback } from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

function TaskCompletionCelebration() {
  const { width, height } = useWindowSize()
  const [isExploding, setIsExploding] = useState(false)

  const handleComplete = useCallback(() => {
    setIsExploding(true)
  }, [])

  return (
    <div>
      <button onClick={handleComplete} disabled={isExploding}>
        Complete Task
      </button>

      <Confetti
        width={width}
        height={height}
        numberOfPieces={isExploding ? 200 : 0}
        recycle={false}
        tweenDuration={1000}
        onConfettiComplete={(confetti) => {
          setIsExploding(false)
          confetti.reset()
        }}
      />
    </div>
  )
}
```

--------------------------------

### React Confetti Component

Source: https://context7.com/alampros/react-confetti/llms.txt

This section details the React Confetti component and its various props for customization.

```APIDOC
## React Confetti Component

### Description
The `Confetti` component renders animated confetti particles on an HTML5 Canvas element. It is designed for celebratory UI moments and offers extensive customization over particle behavior, physics, and appearance.

### Props Reference

#### width
- **width** (number) - Optional - Width of the canvas element in pixels. Defaults to window.innerWidth or 300 if window is unavailable.

#### height
- **height** (number) - Optional - Height of the canvas element in pixels. Defaults to window.innerHeight or 200 if window is unavailable.

#### numberOfPieces
- **numberOfPieces** (number) - Optional - Maximum number of confetti particles to render simultaneously. Default is 200. Set to 0 to disable confetti.

#### gravity
- **gravity** (number) - Optional - Controls how fast particles fall in pixels per frame. Default is 0.1. Positive values pull down, negative values push up.

#### wind
- **wind** (number) - Optional - Horizontal force applied to particles. Default is 0. Positive values blow right, negative values blow left.

#### friction
- **friction** (number) - Optional - Slows particle movement over time. Default is 0.99. Lower values cause more drag.

#### initialVelocityX
- **initialVelocityX** (number | { min: number, max: number }) - Optional - Horizontal emission speed of particles. Default is 4. Can be a number (creating a range from -number to number) or an object with min/max values.

#### initialVelocityY
- **initialVelocityY** (number | { min: number, max: number }) - Optional - Vertical emission speed of particles. Default is 10. Can be a number (creating a range from -number to 0) or an object with min/max values.

#### colors
- **colors** (Array<string>) - Optional - Array of color strings for confetti particles. Supports any CSS color format. Defaults to a 17-color rainbow palette.

### Request Example
```jsx
import React from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

export default function CelebrationPage() {
  const { width, height } = useWindowSize()

  return (
    <div>
      <h1>Congratulations!</h1>
      <Confetti
        width={width}
        height={height}
        numberOfPieces={100}
        gravity={0.15}
        wind={0.01}
        colors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
      />
    </div>
  )
}
```

### Response
This component does not have a direct request/response cycle in the traditional API sense. It renders visually based on its props.
```

--------------------------------

### Access Canvas Element with Ref

Source: https://context7.com/alampros/react-confetti/llms.txt

Forward a ref to the `Confetti` component to gain access to the underlying canvas element. This allows direct interaction with the canvas, such as logging its dimensions.

```jsx
import React, { useRef, useEffect } from 'react'
import Confetti from 'react-confetti'

function ConfettiWithRef() {
  const canvasRef = useRef(null)

  useEffect(() => {
    if (canvasRef.current) {
      console.log('Canvas dimensions:',
        canvasRef.current.width,
        canvasRef.current.height
      )
    }
  }, [])

  return <Confetti ref={canvasRef} />
}
```

--------------------------------

### Customize Confetti Colors

Source: https://context7.com/alampros/react-confetti/llms.txt

Provide an array of CSS color strings to define the confetti particle colors. Supports any valid CSS color format. If not provided, a default rainbow palette is used.

```jsx
import Confetti from 'react-confetti'

// Custom brand colors
<Confetti colors={['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4']} />
```

```jsx
// Gold and silver celebration
<Confetti colors={['#FFD700', '#C0C0C0', '#FFF8DC', '#D4AF37']} />
```

```jsx
// Single color
<Confetti colors={['#FF0000']} />
```

--------------------------------

### React Confetti Component Props

Source: https://github.com/alampros/react-confetti/blob/develop/README.md

This section details the various props available for the react-confetti component, allowing for customization of confetti behavior and appearance.

```APIDOC
## React Confetti Component Props

### Description
This section details the various props available for the react-confetti component, allowing for customization of confetti behavior and appearance.

### Props

#### `width`
- **Type**: `Number`
- **Default**: `window.innerWidth || 300`
- **Description**: Width of the `<canvas>` element.

#### `height`
- **Type**: `Number`
- **Default**: `window.innerHeight || 200`
- **Description**: Height of the `<canvas>` element.

#### `numberOfPieces`
- **Type**: `Number`
- **Default**: `200`
- **Description**: Number of confetti pieces at one time.

#### `confettiSource`
- **Type**: `{ x: Number, y: Number, w: Number, h: Number }`
- **Default**: `{x: 0, y: 0, w: canvas.width, h:0}`
- **Description**: Rectangle where the confetti should spawn. Default is across the top.

#### `friction`
- **Type**: `Number`
- **Default**: `0.99`
- **Description**: Controls the friction affecting confetti movement.

#### `wind`
- **Type**: `Number`
- **Default**: `0`
- **Description**: Controls the wind effect on confetti.

#### `gravity`
- **Type**: `Number`
- **Default**: `0.1`
- **Description**: Controls the gravity effect on confetti.

#### `initialVelocityX`
- **Type**: `Number | { min: Number, max: Number }`
- **Default**: `4`
- **Description**: Range of values between which confetti is emitted horizontally, positive numbers being rightward, and negative numbers being leftward. Giving a number `x` is equivalent to giving a range `{ min: -x, max: x }`.
```

--------------------------------

### Handle Confetti Completion Callback

Source: https://context7.com/alampros/react-confetti/llms.txt

The `onConfettiComplete` callback is invoked when all confetti has fallen off-canvas, provided `recycle` is set to `false`. It receives the confetti instance, allowing for actions like resetting or updating UI.

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

function CelebrationWithCallback() {
  const [celebrating, setCelebrating] = useState(false)
  const [message, setMessage] = useState('')

  const startCelebration = () => {
    setCelebrating(true)
    setMessage('Celebrating!')
  }

  return (
    <div>
      <button onClick={startCelebration}>Celebrate!</button>
      <p>{message}</p>

      {celebrating && (
        <Confetti
          numberOfPieces={200}
          recycle={false}
          onConfettiComplete={(confetti) => {
            setMessage('Celebration complete!')
            setCelebrating(false)
            confetti.reset() // Reset for next celebration
          }}
        />
      )}
    </div>
  )
}
```

--------------------------------

### Define Confetti Spawn Source Rectangle

Source: https://context7.com/alampros/react-confetti/llms.txt

Specify a rectangle defining where confetti particles spawn. Defaults to spawning across the top edge of the canvas.

```jsx
import React from 'react'
import Confetti from 'react-confetti'

// Spawn from center of screen
<Confetti
  confettiSource={{
    x: window.innerWidth / 2 - 25,
    y: window.innerHeight / 2,
    w: 50,
    h: 0
  }}
/>

// Spawn from bottom left corner
<Confetti
  confettiSource={{
    x: 0,
    y: window.innerHeight,
    w: 100,
    h: 0
  }}
  initialVelocityY={{ min: -15, max: -5 }}
/>

// Dynamic mouse-following source
function MouseConfetti() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })

  return (
    <div onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY }) }>
      <Confetti
        confettiSource={{
          x: mousePos.x - 25,
          y: mousePos.y,
          w: 50,
          h: 0
        }}
      />
    </div>
  )
}
```

--------------------------------

### Configure Confetti Canvas Height

Source: https://context7.com/alampros/react-confetti/llms.txt

Set the height of the confetti canvas in pixels. Defaults to window.innerHeight or 200 if the window is unavailable. Useful for containing confetti within a specific area.

```jsx
import Confetti from 'react-confetti'

// Confetti contained to a specific area
<Confetti width={500} height={300} />
```

--------------------------------

### Draw Custom Confetti Shapes

Source: https://context7.com/alampros/react-confetti/llms.txt

Use the `drawShape` prop to provide a custom canvas rendering function for confetti particles. This function receives the 2D canvas context and has the particle's properties available as `this`.

```jsx
import Confetti from 'react-confetti'

// Draw spiral shapes
<Confetti
  drawShape={(ctx) => {
    ctx.beginPath()
    for (let i = 0; i < 22; i++) {
      const angle = 0.35 * i
      const x = (0.2 + 1.5 * angle) * Math.cos(angle)
      const y = (0.2 + 1.5 * angle) * Math.sin(angle)
      ctx.lineTo(x, y)
    }
    ctx.stroke()
    ctx.closePath()
  }}
/>
```

```jsx
// Draw star shapes (using particle properties via 'this')
function drawStar(ctx) {
  const numPoints = this.numPoints || 5
  this.numPoints = numPoints
  const outerRadius = this.w
  const innerRadius = outerRadius / 2

  ctx.beginPath()
  ctx.moveTo(0, -outerRadius)

  for (let n = 1; n < numPoints * 2; n++) {
    const radius = n % 2 === 0 ? outerRadius : innerRadius
    const x = radius * Math.sin((n * Math.PI) / numPoints)
    const y = -radius * Math.cos((n * Math.PI) / numPoints)
    ctx.lineTo(x, y)
  }
  ctx.fill()
  ctx.closePath()
}

<Confetti drawShape={drawStar} />
```

```jsx
// Draw snowflakes
function drawSnowflake(ctx) {
  const numPoints = this.numPoints || 6
  this.numPoints = numPoints
  const innerRadius = this.radius * 0.2
  const outerRadius = this.radius * 0.8

  ctx.beginPath()
  ctx.moveTo(0, -outerRadius)

  for (let n = 1; n < numPoints * 2; n++) {
    const radius = n % 2 === 0 ? outerRadius : innerRadius
    const x = radius * Math.sin((n * Math.PI) / numPoints)
    const y = -radius * Math.cos((n * Math.PI) / numPoints)
    ctx.lineTo(x, y)
  }
  ctx.fill()
  ctx.stroke()
  ctx.closePath()
}

<Confetti
  drawShape={drawSnowflake}
  colors={['#AEE1FF', '#CBDDF8', '#FFFFFF']}
  gravity={0.03}
  wind={0.01}
/>
```

```jsx
// Draw money/bills
function drawMoney(ctx) {
  const w = 40
  const h = w * 0.425
  const curveHeight = h / 3

  ctx.beginPath()
  ctx.moveTo(0, 0)
  ctx.quadraticCurveTo(w / 2, curveHeight, w, 0)
  ctx.lineTo(w, h)
  ctx.quadraticCurveTo(w / 2, h + curveHeight, 0, h)
  ctx.lineTo(0, 0)
  ctx.fillStyle = 'green'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.ellipse(w / 2, h / 2 + curveHeight / 2, w / 6, h / 3, 0, 0, Math.PI * 2)
  ctx.fillStyle = 'lightgreen'
  ctx.fill()
  ctx.closePath()
}

<Confetti drawShape={drawMoney} />
```

--------------------------------

### Adjust Confetti Friction

Source: https://context7.com/alampros/react-confetti/llms.txt

Slows particle movement over time. Default is 0.99. Lower values increase drag, causing particles to slow down more quickly. Higher values allow particles to maintain velocity longer.

```jsx
import Confetti from 'react-confetti'

// High friction (particles slow down quickly)
<Confetti friction={0.95} />
```

```jsx
// Low friction (particles maintain velocity longer)
<Confetti friction={0.999} />
```

--------------------------------

### Adjust Confetti Gravity

Source: https://context7.com/alampros/react-confetti/llms.txt

Control the falling speed of particles in pixels per frame. Positive values pull down, negative values push up. Default is 0.1. Lower values create a slower, drifting effect.

```jsx
import Confetti from 'react-confetti'

// Slow, gentle falling (snow-like effect)
<Confetti gravity={0.03} />
```

```jsx
// Normal falling speed
<Confetti gravity={0.1} />
```

```jsx
// Fast falling
<Confetti gravity={0.5} />
```

```jsx
// Floating upward (balloon effect)
<Confetti gravity={-0.05} />
```

--------------------------------

### Control Confetti Recycling Behavior

Source: https://context7.com/alampros/react-confetti/llms.txt

When `recycle` is false, particles fall once and disappear. Default is true, where particles are recycled when they exit the canvas.

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

function OneTimeCelebration() {
  const [showConfetti, setShowConfetti] = useState(true)

  return (
    <Confetti
      recycle={false}
      numberOfPieces={showConfetti ? 200 : 0}
      onConfettiComplete={() => setShowConfetti(false)}
    />
  )
}
```

--------------------------------

### TypeScript Types for Confetti Options

Source: https://context7.com/alampros/react-confetti/llms.txt

Defines TypeScript interfaces for Confetti component props, ensuring type safety. Includes IConfettiOptions and IRect interfaces.

```typescript
import Confetti, { IConfettiOptions } from 'react-confetti'

// IConfettiOptions interface
interface IConfettiOptions {
  width: number
  height: number
  numberOfPieces: number
  friction: number
  wind: number
  gravity: number
  initialVelocityX: { min: number; max: number } | number
  initialVelocityY: { min: number; max: number } | number
  colors: string[]
  opacity: number
  recycle: boolean
  run: boolean
  frameRate?: number
  debug: boolean
  confettiSource: IRect
  tweenFunction: (
    currentTime: number,
    currentValue: number,
    targetValue: number,
    duration: number,
    s?: number
  ) => number
  tweenDuration: number
  drawShape?: (context: CanvasRenderingContext2D) => void
  onConfettiComplete?: (confettiInstance?: Confetti) => void
}

// IRect interface for confettiSource
interface IRect {
  x: number
  y: number
  w: number
  h: number
}

// Usage with TypeScript
const MyConfetti: React.FC = () => {
  const options: Partial<IConfettiOptions> = {
    numberOfPieces: 150,
    gravity: 0.15,
    colors: ['#ff0000', '#00ff00', '#0000ff']
  }

  return <Confetti {...options} />
}
```

--------------------------------

### Control Number of Confetti Pieces

Source: https://context7.com/alampros/react-confetti/llms.txt

Adjust the maximum number of confetti particles rendered simultaneously. Set to 0 to disable confetti, useful for conditional rendering. Defaults to 200.

```jsx
import Confetti from 'react-confetti'

// Subtle effect with fewer particles
<Confetti numberOfPieces={50} />
```

```jsx
// Dense celebration effect
<Confetti numberOfPieces={500} />
```

```jsx
// Disable confetti (useful for conditional rendering)
<Confetti numberOfPieces={0} />
```

--------------------------------

### Control Confetti Wind Force

Source: https://context7.com/alampros/react-confetti/llms.txt

Apply horizontal force to particles. Positive values blow right, negative values blow left. Default is 0. Useful for creating drifting effects when combined with low gravity.

```jsx
import Confetti from 'react-confetti'

// Gentle breeze to the right
<Confetti wind={0.01} />
```

```jsx
// Strong wind to the left
<Confetti wind={-0.05} />
```

```jsx
// Combined with low gravity for drifting effect
<Confetti gravity={0.02} wind={0.02} />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.