@any-tdf/react-confetti

React port of svelte-confetti@2.3.2.

The component renders pure HTML and CSS animation markup. It does not use canvas, timers for animation frames, or runtime physics. The goal is API and visual behavior parity with svelte-confetti, with React-only className and style passthrough for integration.

Install

bun add @any-tdf/react-confetti

import { Confetti } from '@any-tdf/react-confetti';

export const Demo = () => <Confetti rounded amount={100} />;

Documentation

This package ships with a standalone React documentation site under docs/site.

bun install
bun run docs:dev
bun run docs:build

The site mirrors the demo structure and API coverage from svelte-confetti@2.3.2, with Chinese and English content.

Props

Prop	Default	Description
size	10	Maximum size in pixels for each confetti piece.
x	[-0.5, 0.5]	Horizontal range multiplier. [-1, 1] means up to 200px left and right.
y	[0.25, 1]	Vertical range multiplier. Negative values move downward, positive values move upward.
duration	2000	Animation duration for each piece in milliseconds.
infinite	false	Loops the animation indefinitely. Overrides iterationCount.
delay	[0, 50]	Random delay range for each piece in milliseconds.
colorRange	[0, 360]	HSL hue range used when colorArray is empty.
colorArray	[]	CSS color values to pick from randomly. Supports gradients and image backgrounds.
amount	50	Number of confetti pieces. Large values can affect performance.
iterationCount	1	CSS animation-iteration-count; accepts numbers, infinite, initial, or inherit.
fallDistance	"100px"	CSS distance each piece falls after the burst.
rounded	false	Renders circular pieces.
cone	false	Shapes the burst as a cone.
noGravity	false	Uses a constant-speed explosion without the falling stage.
xSpread	0.15	Horizontal spread from 0 to 1. Lower values keep peak and end X positions closer.
destroyOnComplete	true	Removes the markup after finite animations complete on the client.
disableForReducedMotion	false	Disables animation when prefers-reduced-motion is active.
className	""	Extra class name for the holder element.
style	undefined	Extra inline styles for the holder element.

Notes

• The CSS trajectory, timing variables, gravity behavior, cone behavior, reduced-motion behavior, and default values are based on svelte-confetti@2.3.2.
• The component is SSR-friendly. Server rendering outputs the same holder and piece markup; client-side cleanup only runs after mount.
• Random piece values are generated from prop values, not array prop identities, so parent re-renders with equivalent inline ranges do not restart the burst.