# EmojiPicker

A user-friendly tool for selecting and inserting emojis into text inputs or forms.

### **Import**
```tsx
import { EmojiPicker } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { EmojiPicker } from '@app-studio/web';

export const DefaultEmojiPicker = () => (
  <EmojiPicker
    label="Choose an emoji"
    placeholder="Select an emoji"
    onChange={(emoji) => console.log('Selected emoji:', emoji)}
    onEmojiSelect={(emoji) => console.log('Selected emoji object:', emoji)}
  />
);
```

### **customEmojis**
An array of custom Emoji objects to include in the picker.

- **Type:** `Emoji[]`
- **Possible Values:** ``

```tsx
import React from 'react';
import { EmojiPicker } from '@app-studio/web';

export const CustomEmojisEmojiPicker = () => (
  <EmojiPicker
    label="Custom emoji set"
    customEmojis={[
      {
        emoji: '🚀',
        name: 'rocket',
        category: 'objects',
        keywords: ['rocket', 'space', 'launch'],
      },
      {
        emoji: '⭐',
        name: 'star',
        category: 'symbols',
        keywords: ['star', 'favorite', 'rating'],
      },
      {
        emoji: '🎯',
        name: 'target',
        category: 'activities',
        keywords: ['target', 'goal', 'aim'],
      },
      {
        emoji: '💎',
        name: 'diamond',
        category: 'objects',
        keywords: ['diamond', 'gem', 'precious'],
      },
      {
        emoji: '🔥',
        name: 'fire',
        category: 'symbols',
        keywords: ['fire', 'hot', 'trending'],
      },
      {
        emoji: '⚡',
        name: 'lightning',
        category: 'symbols',
        keywords: ['lightning', 'fast', 'energy'],
      },
    ]}
    enabledCategories={['recent', 'objects', 'symbols', 'activities']}
    showSearch={true}
    showRecentEmojis={true}
    placeholder="Choose from custom emojis"
    onChange={(emoji) => console.log('Selected custom emoji:', emoji)}
  />
);
```