EmojiPicker
An emoji picker component with search, categories, and recent emojis for user selection
Installation
Terminal
Import
Component.tsx
Basic
Basic emoji picker implementation.
Features:
- Category browsing and search
- Automatic frequently used emoji tracking
- Virtualized scrolling for performance
- Support for dark/light themes
Please select an emoji
Variants
Visual variants of the emoji picker.
Variants:
- **default**: Follows the page theme dynamically (light/dark mode)
- **light**: Fixed light appearance regardless of theme
- **dark**: Fixed dark appearance regardless of theme
Without Frequently Used
Emoji picker with `showFrequentlyUsed={false}`.
### When to Use
- Privacy-sensitive applications
- Single-use emoji selection (no need to track habits)
- Simplified UI without history tracking
### Behavior
- No "Frequently used" category displayed
- Category navigation excludes frequently used icon
- Emoji selections are not saved to local storage
Please select an emoji
Multiple Controlled
Multiple independent emoji pickers on the same page.
### Key Points
- Each picker has its own state (`emoji1`, `emoji2`)
- Each picker has its own open state (`open1`, `open2`)
- Combined with `Popover` for dropdown behavior
- Auto-close popover after selection
### Popover Integration
- Use `Popover.Header` with custom styling to match picker variant
- Set `className="overflow-hidden"` on Popover for clean edges
- Set `className="p-0"` on `Popover.Content` to remove padding
Picker 1: Not selected | Picker 2: Not selected
Internationalization
Internationalization (i18n) support for the emoji picker.
### Supported Languages
- English (default)
- Chinese (中文)
- Japanese (日本語)
- Korean (한국어)
- Spanish (Español)
- And more...
### Customizable Text
- `searchPlaceholder`: Search input placeholder
- `i18n.noEmojisFoundTitle`: Empty state title
- `i18n.noEmojisFoundDescription`: Empty state description
- `i18n.footerPickAnEmoji`: Footer placeholder text
- `i18n.categories.*`: Category names (9 categories)
Language:
Pick an emoji...
External Value Control
Control emoji picker value from external components.
### Features Demonstrated
- Set default value on mount using `emojis.find()`
- Quick select buttons to change value externally
- Custom "recently used" list managed in parent state
- Clear selection and history
### Using `emojis` Array
```tsx
import { emojis } from "@choice-ui/react"
// Find emoji by character
const emoji = emojis.find((e) => e.emoji === "😀")
// Set as initial value
const [selected, setSelected] = useState(emoji || null)
```
Current: 😀 grinning face
Quick:
API reference
| EmojiPickerProps | Type | Default |
|---|---|---|
className | string |undefined | - |
columns | number |undefined | - |
height | number |undefined | - |
onChange | ((emoji: EmojiData) => void) |undefined | - |
searchPlaceholder | string |undefined | - |
showCategories | boolean |undefined | - |
showFrequentlyUsed | boolean |undefined | - |
showSearch | boolean |undefined | - |
showFooter | boolean |undefined | - |
value | EmojiData |null |undefined | - |
variant | undefined |"default" |"dark" |"light" | - |
i18n | { noEmojisFoundTitle?: string |undefined; noEmojisFoundDescription?: string |undefined; footerPickAnEmoji?: string |undefined; categories?: { frequentlyUsed: string; smileysPeople: string; ... 6 more ...; flags: string; } |undefined; } |undefined | - |
| useEmojiData | Type | Default |
categoryNames | CategoryNames |undefined | {
frequentlyUsed: "Frequently used",
smileysPeople: "Smileys & People",
animalsNature: "Animals & Nature",
foodDrink: "Food & Drink",
travelPlaces: "Travel & Places",
activities: "Activities",
objects: "Objects",
symbols: "Symbols",
flags: "Flags",
} |
columns | number | - |
searchQuery | string | - |
showFrequentlyUsed | boolean | - |
| useEmojiScroll | Type | Default |
categorizedData | VirtualItem[] | - |
categoryIndexMap | Map<EmojiCategory, number> | - |
columns | number | - |
findEmojiPosition | (emoji: EmojiData) => { emojiIndex: number; itemIndex: number; } |null | - |
searchQuery | string | - |
value | EmojiData |null |undefined | - |