Function confetti

  • confetti(props?): Element

  • Creates a confetti animation component that displays animated confetti particles.

    Parameters

    • Optionalprops: ConfettiBlockProps

      Configuration object for the confetti component (optional)

    Returns Element

    A JSX element representing the confetti component

    Example

    Basic usage with defaults (80% height, CSS variable colors)

    confetti();

    Example

    Usage with explicit height in pixels

    confetti({
      height: 300
    });

    Example

    Usage with percentage height

    confetti({
      height: '100%'
    });

    Example

    Usage with custom colors

    confetti({
      height: 300,
      colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
    });

    Example

    Usage with dynamic height based on state

    confetti({
      height: (state) => state.containerHeight || 300
    });

    Example

    Usage with dynamic colors based on state

    confetti({
      height: 300,
      colors: (state) => state.theme === 'dark'
        ? ['#7FB069', '#B96AC9', '#E57AA3']
        : ['#FF6B6B', '#4ECDC4', '#45B7D1']
    });

    Example

    Usage with custom styling

    confetti({
      height: 400,
      style: {
        position: 'absolute',
        top: 0,
        left: 0
      },
      className: 'celebration-confetti'
    });

Settings