😊Emoji Select Panel Component

📙 Emoji Select Panel Documentation

The Emoji Select Panel is a high-performance, production-ready emoji panel component supporting emojis, GIFs, and stickers. It utilizes virtualized rendering for large datasets to maintain optimal performance.

📦 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);
  }

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

⚙️ Advanced Usage

<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

Here are the available props:

onSelect: (item: MediaItem) => void
emojiData?: Record<string, string[]>
emojiCategories?: EmojiCategory[]
gifCategories?: GifCategory[]
stickerCategories?: StickerCategory[]
defaultMediaType?: "emoji" | "gif" | "sticker"
defaultCategory?: string
lightTheme?: boolean
height?: number
width?: number | string
position?: "top" | "bottom" | "left" | "right"
zIndex?: number
closeOnSelect?: boolean
fetchItems?: (type, category, query) => Promise<MediaItem[]>
showTabs?: boolean
showSearch?: boolean
showCategories?: boolean
className?: string
trigger?: ReactNode
defaultOpen?: boolean
persistRecent?: boolean
storageKey?: string

🧠 Custom Data Integration

Use your own emoji or media data:

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

<EmojiPanel emojiData={myEmojiData} />

🌍 Custom API Fetching

const fetchFromMyApi = async (type, category, query) => {
  const res = await fetch(`/api/media?type=${type}&category=${category}&q=${query}`);
  const data = await res.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} />

🧠 Performance Tips

Want to contribute?

Help us improve this project and make it better for everyone.

Contribute on GitHub