FloatingReactions
floating-reactionsAnimates lightweight audience reactions upward over live content.
Usage
Imperative trigger
By ref.emit spraying floating emoticons, count fires multiple at once. Click the button to try it.
const ref = useRef<FloatingReactionsHandle>(null);
<button onClick={() => ref.current?.emit("❤️", { count: 3 })}> Like ❤️</button>
<FloatingReactions ref={ref} />Random emoticon pool
When content is not transmitted, an emoticon is randomly selected from palette, which is suitable for mixed floating characters on the "like wall".
<button onClick={() => ref.current?.emit(undefined, { count: 3 })}>Send flowers 🌸</button>
<FloatingReactions ref={ref} palette={["🌸", "🌺", "🌷", "💐"]} />Automatic burst
Call emit regularly to simulate the happy atmosphere of continuous likes in the live broadcast room.
useEffect(() => {
const id = setInterval(() => ref.current?.emit(undefined, { count: 2 }), 500);
return () => clearInterval(id);
}, []);
<FloatingReactions ref={ref} />Larger font size
size Increase the base font size of individual expressions to make the overall expression more eye-catching.
<FloatingReactions ref={ref} size={40} />When to use
Use FloatingReactions as an effect layer that emits hearts or other reactions upward from a like control. Call ref.emit() imperatively; each item randomizes its origin, drift, and scale, fades out, and removes itself. Use GiftFeed when gifts need streak merging and a counted banner.
Import
import { FloatingReactions } from "@hulianui/ui"Props
Access FloatingReactionsHandle through a ref and call emit(content?, opts?: { count?: number }); when content is absent, an entry is sampled from palette.
| Name | Type | Default | Description |
|---|---|---|---|
| palette | ReactNode[] | Heart set | Reaction pool used when emit has no content. |
| rise | number | 220 | Vertical travel in pixels. |
| drift | number | 40 | Random horizontal travel in pixels. |
| duration | number | 2200 | Animation duration in milliseconds. |
| size | number | 24 | Font size in pixels. |
| className | string | — | Container class name. |
Example
const ref = useRef<FloatingReactionsHandle>(null);
<div className="relative h-72 w-64 overflow-hidden">
<button onClick={() => ref.current?.emit("❤️", { count: 3 })}>Like ❤</button>
<FloatingReactions ref={ref} />
</div>Usage guidelines
- Trigger through the ref's
emit; no prop starts a burst. The containing element needsposition:relativeand usuallyoverflow-hidden. - Reaction elements use
pointer-events:none, so an overlay above a control does not intercept clicks. - No other known caveats.
Related
Alert · Banner · Toast · Notification · ServiceMessage · Result