A searchable grid of emoji, grouped by category. It brings no emoji data of its own, so you pass the list you want, from a package such as emojibase or emoji-mart or from a short list of your own.
Each category has an id, a label and its emojis. Search matches the name and the keywords.
onEmojiSelect receives the emoji and its category. Here it adds the emoji to a text.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the categories and their emojis | EmojiCategory[] | EmojiCategory | - |
| onEmojiSelect | called when an emoji is chosen | (emoji: EmojiItem, category: EmojiCategory) => void | - | - |
| columns | emojis per row | number | - | 8 |
| emojiSize | size of an emoji, in pixels | number | - | 24 |
| height | height of the list, in pixels | number | - | 300 |
| withSearch | show the search field | boolean | - | true |
| searchLabel | accessible name of the search field | string | - | Search emoji |
| searchPlaceholder | placeholder of the search field | string | - | Search emoji |
| withCategoryNav | show the bar to jump between categories | boolean | - | true |
| categoriesLabel | accessible name of that bar | string | - | Categories |
| withPreview | show the emoji and its name below the list | boolean | - | true |
| emptyContent | what to show when the search finds nothing | ReactNode | - | No emoji found |
| autoFocus | focus the search field on mount | boolean | - | false |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
type EmojiCategory = {
id: string
label: string
icon?: string // shown in the category bar, the first emoji when missing
emojis: EmojiItem[]
}
type EmojiItem = {
emoji: string // the character
name: string // names the button, and is searched
keywords?: string[] // searched too
}
The ref points at the root div.
Each emoji is a button named by its name, and each category is a region named by its label. The grid is one tab stop.
| Key | Action |
|---|---|
| Arrow keys | Move between emoji, and across categories on the same column |
| Home and End | First and last emoji |
| Arrow Down in the search | Go into the grid |
| Enter in the search | Choose the first result |