R
交互控件EmojiReactionApple Emoji粒子飘散tapback

Emoji 反应

tapback 风格的反应按钮：点开后弹出一排 Apple emoji，选中后会有复制体从按钮里飘出来。

点击按钮打开 emoji 面板

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/emoji-reaction.tsx。

npx shadcn@latest add swamimalode07/rare-ui/emoji-reaction

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

emoji-reaction.tsx
import { EmojiReaction } from "@/components/ui/emoji-reaction"


export function Demo() {
  return (
    <EmojiReaction
      size="md"
      align="center"
      onReact={(name) => console.log("反应：", name)}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
emojisstring[]—可用 emoji 名称列表。
emojiDataEmojiData—自定义 emoji 数据源。
onReact(name: string) => void—选择回调。
size"sm" | "md" | "lg""md"按钮尺寸。
align"left" | "center" | "right""center"弹出方向对齐。
asChildbooleanfalse把触发能力交给子元素。