Matterway
    Preparing search index...

    Function confetti

    • Confetti animation component displaying animated confetti particles.

      Parameters

      • Optionalprops: ConfettiBlockProps

        Configuration object

        • height

          Height of the confetti canvas. Can be a number (pixels), string (e.g., '80%', '100vh'), or a function that receives params with data and value, returning a number or string. Defaults to '80%'

        • colors

          Custom colors for confetti particles. If not provided, will use CSS variables or fallback colors. Can be a static array of color strings or a function that receives params with data and value, returning an array of colors

        • duration

          Duration to emit new particles before winding down in milliseconds. Default: 5000 (5 seconds)

        • style

          Custom CSS styles to apply to the confetti canvas

        • className

          Additional CSS classes to apply to the confetti canvas

      Returns Element

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

      confetti();

      Usage with explicit height in pixels

      confetti({
        height: 300
      });

      Usage with percentage height

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

      Usage with custom colors

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

      Usage with dynamic height based on params with data and value

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

      Usage with dynamic colors based on params with data and value

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

      Usage with custom styling

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

    Settings