# EmojiPicker Documentation

## Installation

```bash
jsrepo add ui/emoji-picker
```

## Components

### Root

The root component of the emoji picker.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| skin | 0 | 1 | 2 | 3 | 4 | 5 | 0 | false | true | The default skin tone to use. |
| onSelect | (emoji: SelectedEmoji) => void | - | false | false | Callback fired when an emoji is selected. |
| onSkinChange | (skin: EmojiPickerSkin) => void | - | false | false | Callback fired when the skin tone changes. |
| showRecents | boolean | - | false | false | Show recently used emojis. |
| recentsKey | string | - | false | false | The key to use to store the recently used emojis. |
| maxRecents | number | - | false | false | The maximum number of recent emojis to show. |
| children | Snippet | - | false | false | The content of the emoji picker. |

### List

Displays the list of emojis.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| emptyMessage | string | No results. | false | false | The message to display when there are no results. |

### Viewport

The viewport container for the emoji picker.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|


### Search

The search input for filtering emojis.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|


### Footer

The footer area of the emoji picker.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| children | Snippet<[{ active: SelectedEmoji | null }]> | - | false | false | A render function for the footer content. Receives `{ active }` as argument. |

### SkinToneSelector

A button for selecting the emoji skin tone.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| previewEmoji | string | 👋 | false | false | The emoji to use to preview the skin tone. |