# EmojiPicker

> Emoji panel with search, category tabs and a keyboard-navigable grid (arrows, Home/End; Enter or Space picks).

Source: https://ui.jcsoftdev.com/docs/components/emoji-picker

Emoji panel with search, category tabs and a keyboard-navigable grid (arrows, Home/End; Enter or
Space picks). The panel adapts to its container width and holds no portal, so it works inline or
inside a popover.

## Import

```ts
import { EmojiPicker } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/emoji-picker`.

## Usage

```tsx
export const Default: Story = { render: () => <WithPreview /> };
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onSelect` | `((emoji: string) => void)` |  |  |
| `categories` | `EmojiCategory[]` | `EMOJI_CATEGORIES` | Replaces the built-in dataset (`EMOJI_CATEGORIES`). |
| `defaultCategory` | `string` |  | Initial category id. |
| `searchPlaceholder` | `string` | `"Buscar emoji"` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-emojipicker--default)
- [Narrow](/storybook/?path=/story/forms-emojipicker--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-emojipicker--brutal-preset)

## Source

`packages/ui/src/forms/emoji-picker/emoji-picker.tsx`