FloatingReactions
floating-reactions飘心点赞 · 命令式 ref.emit(content,{count}) 从底部喷射上浮表情 + 随机起点/横向漂移/缩放/时长扰动 + 上浮渐隐(keyframe)动画结束自移除 + palette 随机池 + rise/drift/duration 可调(forwardRef+useImperativeHandle·pointer-events none·可复用于任意点赞钮)
用法
命令式触发
通过 ref.emit 喷射上浮表情，count 一次发射多个。点击按钮试试。
tsx
const ref = useRef<FloatingReactionsHandle>(null);
<button onClick={() => ref.current?.emit("❤️", { count: 3 })}>点赞 ❤️</button>
<FloatingReactions ref={ref} />随机表情池
不传 content 时从 palette 随机取一个表情，适合「点赞墙」混合飘字。
tsx
<button onClick={() => ref.current?.emit(undefined, { count: 3 })}>送花 🌸</button>
<FloatingReactions ref={ref} palette={["🌸", "🌺", "🌷", "💐"]} />自动连发
定时调用 emit 模拟直播间持续点赞的飘心氛围。
tsx
useEffect(() => {
const id = setInterval(() => ref.current?.emit(undefined, { count: 2 }), 500);
return () => clearInterval(id);
}, []);
<FloatingReactions ref={ref} />更大字号
size 调大单个表情的基准字号，整体更醒目。
tsx
<FloatingReactions ref={ref} size={40} />何时用
点赞/互动时从底部喷射上浮飘心表情的特效层用它：命令式 ref.emit() 触发，随机起点/漂移/缩放、上浮渐隐后自移除。它是叠加特效层（pointer-events:none），只管单个表情上浮动画；要做礼物连击合并计数横幅用 GiftFeed。
导入
ts
import { FloatingReactions } from "@hulianui/ui"Props
通过 ref 取 FloatingReactionsHandle，命令式调用 emit(content?, opts?: { count?: number })（不传 content 时从 palette 随机取）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| palette | ReactNode[] | 一组心 | 不传 content 时随机取的表情池 |
| rise | number | 220 | 上浮高度 px |
| drift | number | 40 | 横向漂移幅度 px（左右随机） |
| duration | number | 2200 | 单个动画时长 ms |
| size | number | 24 | 字号 px |
| className | string | — | 容器类名 |
禁忌 / 坑
- 命令式 API：必须经
ref调emit，没有 props 控制触发。容器须position:relative且建议overflow-hidden，否则上浮表情会溢出可视区。 - 表情元素
pointer-events:none，不会拦截点击；放在按钮上方安全。 - 暂无其它已知坑。
相关
Alert · Banner · Toast · Notification · ServiceMessage · Result