EmojiPicker
emoji-picker表情选择器 · 内联 emoji 数据集(7 分类·中英关键词) + 关键词搜索 + 分类页签 + 最近使用(受控/内部) · 搜索框 dogfood Input · onSelect 回传 emoji(零依赖·聊天/评论)
用法
基础用法
分类页签 + 关键词搜索，onSelect 拿到选中的 emoji 字符。
笑脸
tsx
<EmojiPicker onSelect={(e) => insert(e)} />预置最近使用 + 隐藏搜索
受控传 recent 置顶常用表情；searchable=false 去掉搜索框。
最近使用
笑脸
tsx
<EmojiPicker
searchable={false}
recent={["🔥", "💯", "👍", "🎉", "❤️"]}
onSelect={(e) => insert(e)}
/>更紧凑（6 列）
columns 调整每行个数，配 className 收窄整体宽度。
笑脸
tsx
<EmojiPicker columns={6} className="w-60" onSelect={(e) => insert(e)} />何时用
聊天/评论输入框旁需要插入表情时用，emoji 数据（7 分类 + 中英关键词）内置、零依赖、支持搜索。本身只是表情面板，浮层弹出/定位需自配 Popover 等容器。
导入
ts
import { EmojiPicker, EMOJI_CATEGORIES, ALL_EMOJI } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| columns | number | 8 | 网格列数 |
| searchable | boolean | true | 是否显示搜索框 |
| defaultCategory | string | 第一个分类 | 初始分类 key |
| recent | string[] | — | 受控「最近使用」列表；省略则组件内部维护 |
| searchPlaceholder | string | — | 搜索框 placeholder |
| className | string | — | 透传到容器 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onSelect | (emoji: string) => void | 选中某个 emoji 的回调，参数为 emoji 字符 |
禁忌 / 坑
recent一旦传入即进入受控模式，组件不再自行追加最近使用，需自己在onSelect里维护并回写；省略才走内部自动维护。- 组件只是面板，不含触发器/浮层定位；要做弹出式表情按钮需自己套 Popover。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
笑脸
<EmojiPicker onSelect={(e) => insert(e)} />