A fast, lightweight, zero-dependency emoji picker for React.

• Virtual scrolling — renders only visible rows for buttery-smooth performance
• Skin tone support — per-emoji skin tone modifiers
• Search — instant filtering across names and keywords
• Recent emojis — localStorage-backed recently-used list
• Full accessibility — ARIA roles, keyboard navigation, focus management
• Themeable — light / dark / auto via CSS custom properties
• Tiny — zero runtime dependencies, tree-shakeable ESM + CJS
• TypeScript — complete type definitions included

# npm
npm install @alihesari/emoji-picker

# pnpm
pnpm add @alihesari/emoji-picker

# yarn
yarn add @alihesari/emoji-picker

Peer dependencies: react >=18 and react-dom >=18.

import { EmojiPicker } from "@alihesari/emoji-picker";
import "@alihesari/emoji-picker/styles.css";

function App() {
  return (
    <EmojiPicker
      onEmojiClick={(emoji) => {
        console.log(emoji.emoji); // 😎
        console.log(emoji.name);  // "smiling face with sunglasses"
      }}
    />
  );
}

interface EmojiData {
  emoji: string;        // The rendered emoji (with skin tone applied)
  name: string;         // Human-readable name
  originalEmoji: string; // Emoji without skin tone
  skinTone: SkinTone;   // Which skin tone was applied
}

type SkinTone = "neutral" | "light" | "medium-light" | "medium" | "medium-dark" | "dark";

type CategoryId =
  | "recent" | "smileys" | "people" | "animals" | "food"
  | "travel" | "activities" | "objects" | "symbols" | "flags";

All colours use CSS custom properties. Override them on .ep-root or a parent:

.my-picker {
  --ep-bg: #1a1a2e;
  --ep-border: #16213e;
  --ep-text: #eaeaea;
  --ep-text-secondary: #888;
  --ep-hover-bg: #16213e;
  --ep-active-bg: #0f3460;
  --ep-input-bg: #0a0a1a;
  --ep-input-border: #16213e;
  --ep-radius: 12px;
}

<EmojiPicker className="my-picker" onEmojiClick={handleClick} />

• Escape — clears the search query
• Tab — navigates between search, categories, and the grid
• Standard focus management with :focus-visible outlines

# Install dependencies
pnpm install

# Build
pnpm build

# Dev (watch mode)
pnpm dev

# Type check
pnpm typecheck

MIT © Ali Hesari