EmojiPicker
emoji-pickerSearches and selects emoji by category, including a recent-use section.
Usage
Basic usage
Category tab + keyword search, onSelect gets the selected emoji character.
<EmojiPicker onSelect={(e) => insert(e)} />Preset Recently Used + Hide Search
Controlled transmission recent pins common emoticons; searchable=false removes the search box.
<EmojiPicker
searchable={false}
recent={["🔥", "💯", "👍", "🎉", "❤️"]}
onSelect={(e) => insert(e)}
/>More compact (6 columns)
columns adjusts the number of each line, and className narrows the overall width.
<EmojiPicker columns={6} className="w-60" onSelect={(e) => insert(e)} />When to use
Use EmojiPicker beside a chat or comment input. It includes searchable emoji data across seven categories with Chinese and English keywords. The component is a panel only; wrap it in Popover or another overlay for trigger and positioning behavior.
Search, empty-state, recent-section, and category labels follow the nearest ConfigProvider locale (zhCN by default, or enUS). A supplied searchPlaceholder overrides the localized default.
Import
import { EmojiPicker, EMOJI_CATEGORIES, ALL_EMOJI } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | number | 8 | Number of grid columns |
| searchable | boolean | true | Whether to display the search box |
| defaultCategory | string | first category | Initial classification key |
| recent | string[] | — | Controlled "recently used" list; if omitted, the component is maintained internally |
| searchPlaceholder | string | "\u641c\u7d22\u8868\u60c5" | Search placeholder; the built-in Chinese copy means “Search emoji.” |
| className | string | — | supports to container |
Events
| Event | Type | Description |
|---|---|---|
| onSelect | (emoji: string) => void | Select the callback of an emoji, the parameter is the emoji character |
Usage guidelines
- Passing
recentenables controlled mode. Maintain it fromonSelect; when omitted, the component updates recent emoji internally. - EmojiPicker has no trigger or popup positioning. Compose it with Popover for a popup button.
Related
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
<EmojiPicker onSelect={(e) => insert(e)} />