Emoji picker
Search and insert an emoji.
Preview
Use Emoji icon picker for the complete picker, reaction strip, optional regions, custom images and icon providers. This adapter keeps existing native emoji string values and callbacks. It uses the same canonical interaction and styling.
Design guidance
Keep this adapter for existing native-glyph values. Use stable IDs in new code through the canonical Emoji icon picker.
Installation
Download example files — JSX recipes, demo styles and any sample assets. Install the component first.
Basic usage
Structures
EmojiPicker is a compatibility adapter over EmojiIconPicker. Its convenience and inline Content APIs retain native emoji string values; new integrations can migrate to the canonical owner's stable item IDs. The canonical examples cover popup and inline composition.
Examples
The canonical examples show the current popup, inline, catalog, and provider compositions. The library guide explains data contracts and optional imports.
Controlled legacy value
This adapter reports a native glyph string instead of a stable item ID.
Full catalogue
See Full catalog.
Inline
Render Content directly when the host already supplies the surface.
Disabled
API reference
EmojiPicker compatibilityvalue / defaultValue | string | null | — | Controlled or initial native emoji; onValueChange reports its glyph. |
|---|
items | readonly EmojiPickerItem[] | — | emoji, label, keywords, category and shortcode; a small offline set is the default. |
|---|
categories | readonly EmojiPickerCategory[] | — | Ordered IDs and labels, with optional category icon. |
|---|
onClear | () => void | — | Caller-owned footer action; no hidden document mutation. |
|---|
disabled | boolean | false | Disables the trigger, input and items. |
|---|
Content | EmojiPickerContentProps | — | Same adapter in an inline or panel surface; variant defaults to inline. |
|---|