Telegram-Style Emoji Select Panel

A high-performance, production-ready emoji panel component that supports emojis, GIFs, and animated stickers with virtualized rendering for optimal performance.

Features

• 🚀 High Performance: Virtualized rendering for handling thousands of items
• 🎨 Themeable: Light and dark theme support
• 📱 Responsive: Works on all screen sizes
• 🔍 Search: Fast filtering across all media types
• 🔄 Multiple Media Types: Emojis, GIFs, and animated stickers
• 🧩 Highly Customizable: Extensive props API
• 💾 Persistent Storage: Remembers recently used emojis
• ♿ Accessible: Keyboard navigation and screen reader support

Installation

npm install emoji-select-panel
# or
yarn add emoji-select-panel

Basic Usage

import { EmojiPanel } from 'emoji-select-panel'

function ChatInput() {
  const handleEmojiSelect = (item) => {
    console.log('Selected:', item.content || item.url)
    // Insert into your text input
  }

  return (
    <div className="chat-input">
      <textarea placeholder="Type a message..." />
      <EmojiPanel onSelect={handleEmojiSelect} />
    </div>
  )
}

Advanced Usage

import { EmojiPanel } from 'emoji-select-panel'
import { SmileIcon } from 'your-icon-library'

function CustomEmojiPanel() {
  return (
    <EmojiPanel
      lightTheme={true}
      width="380px"
      height={400}
      position="top"
      closeOnSelect={true}
      defaultMediaType="gif"
      defaultCategory="trending"
      persistRecent={true}
      storageKey="my-app-recent-emojis"
      trigger={<SmileIcon className="w-5 h-5 text-blue-500" />}
      onSelect={(item) => {
        if (item.type === 'emoji') {
          console.log('Selected emoji:', item.content)
        } else {
          console.log('Selected media:', item.url)
        }
      }}
    />
  )
}

Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSelect | (item: MediaItem) => void | - | Callback when an item is selected | | emojiData | Record<string, string[]> | Default emoji set | Custom emoji data | | emojiCategories | EmojiCategory[] | Default categories | Custom emoji categories | | gifCategories | GifCategory[] | Default categories | Custom GIF categories | | stickerCategories | StickerCategory[] | Default categories | Custom sticker categories | | defaultMediaType | "emoji" \| "gif" \| "sticker" | "emoji" | Initial media type to display | | defaultCategory | string | "recent" | Initial category to display | | lightTheme | boolean | false | Whether to use light theme | | height | number | 350 | Panel height in pixels | | width | number \| string | "320px" | Panel width | | position | "top" \| "bottom" \| "left" \| "right" | "bottom" | Panel position relative to trigger | | zIndex | number | 50 | Z-index for the panel | | closeOnSelect | boolean | false | Whether to close panel after selection | | fetchItems | (type, category, query) => Promise<MediaItem[]> | Built-in fetcher | Custom fetch function | | showTabs | boolean | true | Whether to show media type tabs | | showSearch | boolean | true | Whether to show search input | | showCategories | boolean | true | Whether to show category selector | | className | string | - | Additional CSS class for panel | | trigger | ReactNode | Default button | Custom trigger element | | defaultOpen | boolean | false | Whether panel is initially open | | persistRecent | boolean | true | Whether to store recent emojis | | storageKey | string | "telegram-recent-emojis" | Storage key for recent emojis |

Performance Considerations

The component uses virtualization to efficiently render only the visible items, making it suitable for large datasets. For optimal performance:

1. Custom Fetchers: When implementing a custom fetchItems function, consider pagination or limiting results
2. Image Optimization: For GIFs and stickers, use optimized images and consider lazy loading
3. Debounced Search: The search input is debounced internally to prevent excessive API calls

Telegram Code Style

This component follows Telegram's code style principles:

• Minimal Dependencies: Zero external dependencies beyond React
• Performance First: Optimized for speed and memory efficiency
• Clean API: Simple, intuitive props interface
• Consistent Naming: Clear, descriptive variable and function names
• Modular Architecture: Separation of concerns for maintainability

Custom Data Integration

Custom Emoji Data

const myEmojiData = {
  recent: ["😀", "😁", "😂"],
  custom: ["🚀", "💻", "🔥", "✨"],
  // ...other categories
}

<EmojiPanel emojiData={myEmojiData} />

Custom Categories

import { Rocket, Code, Fire } from 'your-icon-library'

const myCategories = [
  { id: "recent", name: "Recent", icon: Clock },
  { id: "custom", name: "Developer", icon: Code },
  // ...other categories
]

<EmojiPanel emojiCategories={myCategories} />

Custom API Integration

const fetchFromMyApi = async (type, category, query) => {
  const response = await fetch(`/api/media?type=${type}&category=${category}&q=${query}`)
  const data = await response.json()
  
  return data.map(item => ({
    id: item.id,
    content: item.type === 'emoji' ? item.unicode : undefined,
    url: item.type !== 'emoji' ? item.url : undefined,
    type: item.type,
    category: item.category
  }))
}

<EmojiPanel fetchItems={fetchFromMyApi} />