# Emoji Picker

Emoji panel with search, category tabs, a recently used row and long-press skin tones. Picking an emoji can lift it from the grid and fly it to where it’s going.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/emoji-picker
```

## Import

```tsx
import { EmojiPicker } from "@/components/ui/emoji-picker/emoji-picker";
```

## Variants

- `journal` — Mood journal: `npx @lumioui/cli add pro/emoji-picker-journal`
- `reactions` — Message reactions: `npx @lumioui/cli add pro/emoji-picker-reactions`
- `status` — Status emoji: `npx @lumioui/cli add pro/emoji-picker-status`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `onEmojiSelect?` | `(event: EmojiSelectEvent) => void` | Fires with the picked emoji (tone applied). |
| `categories?` | `EmojiCategory[]` | Emoji data. Defaults to the built-in ~330-emoji set. |
| `recent?` | `string[]` | Controlled recent emoji (most recent first). |
| `defaultRecent?` | `string[]` | Uncontrolled initial recents. |
| `onRecentChange?` | `(recent: string[]) => void` | Fires with the updated recents after a pick. |
| `maxRecent?` | `number` | Recent row length. Default 16 (two rows). |
| `skinTone?` | `SkinTone` | Controlled skin tone. |
| `defaultSkinTone?` | `SkinTone` | Uncontrolled initial skin tone. Default "default". |
| `onSkinToneChange?` | `(tone: SkinTone) => void` | Fires when a tone is picked from the long-press popover. |
| `searchable?` | `boolean` | Show the search field. Default true. |
| `columns?` | `number` | Grid columns. Default 8. |
| `height?` | `number` | Panel height in points. Default 360. |
| `flyTo?` | `FlightTarget` | Where a pick flies to — a view ref, or a function choosing one per emoji.  When set, `onEmojiSelect` fires as the emoji lands there. |
| `flySize?` | `number` | Glyph size in points at the destination (it lands at this size). Default 28. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/emoji-picker