Configuration

/**
 * Configuration for the emoji preview section
 */
interface PreviewConfig {
  /** Unicode identifier for the default emoji to show */
  defaultEmoji: string;
  /** Default caption text to display */
  defaultCaption: string;
  /** Whether to show the preview section */
  showPreview: boolean;
}

import EmojiPicker from "emoji-picker-react";

// Custom preview configuration
function CustomPreviewExample() {
  return (
    <EmojiPicker
      previewConfig={{
        showPreview: true,
        defaultEmoji: "1f389", // 🎉 party popper
        defaultCaption: "Choose your reaction!"
      }}
    />
  );
}

// Disable preview
function NoPreviewExample() {
  return (
    <EmojiPicker
      previewConfig={{
        showPreview: false,
        defaultEmoji: "",
        defaultCaption: ""
      }}
    />
  );
}

/**
 * Configuration for a custom emoji
 */
interface CustomEmoji {
  /** Array of names/aliases for the emoji */
  names: string[];
  /** URL to the emoji image */
  imgUrl: string;
  /** Unique identifier for the emoji */
  id: string;
}

import EmojiPicker, { EmojiClickData } from "emoji-picker-react";

function CustomEmojiExample() {
  const customEmojis = [
    {
      names: ["custom_smile", "my_emoji"],
      imgUrl: "https://cdn.example.com/custom-smile.png",
      id: "custom_smile_1"
    },
    {
      names: ["company_logo", "logo"],
      imgUrl: "https://cdn.example.com/logo.png", 
      id: "company_logo_1"
    }
  ];

  const handleEmojiClick = (emojiData: EmojiClickData) => {
    if (emojiData.isCustom) {
      console.log("Custom emoji clicked:", emojiData.names[0]);
    }
  };

  return (
    <EmojiPicker
      customEmojis={customEmojis}
      onEmojiClick={handleEmojiClick}
    />
  );
}

/**
 * Configuration for an individual category
 */
interface CategoryConfig {
  /** Category identifier */
  category: Categories;
  /** Display name for the category */
  name: string;
}

/**
 * Array of category configurations - can be category enums or full config objects
 */
type CategoriesConfig = Array<Categories | CategoryConfig>;

/**
 * User-provided category configuration - can be category enums or full config objects
 */
type UserCategoryConfig = Array<Categories | CategoryConfig>;

enum Categories {
  SUGGESTED = 'suggested',
  CUSTOM = 'custom',
  SMILEYS_PEOPLE = 'smileys_people',
  ANIMALS_NATURE = 'animals_nature',
  FOOD_DRINK = 'food_drink',
  TRAVEL_PLACES = 'travel_places',
  ACTIVITIES = 'activities',
  OBJECTS = 'objects',
  SYMBOLS = 'symbols',
  FLAGS = 'flags'
}

import EmojiPicker, { Categories } from "emoji-picker-react";

// Reorder categories
function ReorderedCategoriesExample() {
  const customCategories = [
    Categories.SMILEYS_PEOPLE,
    Categories.FOOD_DRINK,
    Categories.ANIMALS_NATURE,
    Categories.ACTIVITIES
  ];

  return (
    <EmojiPicker categories={customCategories} />
  );
}

// Custom category names
function CustomCategoryNamesExample() {
  const customCategories = [
    { category: Categories.SMILEYS_PEOPLE, name: "Faces & People" },
    { category: Categories.FOOD_DRINK, name: "Food & Beverages" },
    { category: Categories.ANIMALS_NATURE, name: "Animals" }
  ];

  return (
    <EmojiPicker categories={customCategories} />
  );
}

// Mix of enums and config objects
function MixedCategoriesExample() {
  const categories = [
    Categories.SUGGESTED,
    { category: Categories.SMILEYS_PEOPLE, name: "Emotions" },
    Categories.FOOD_DRINK,
    { category: Categories.CUSTOM, name: "My Custom Emojis" }
  ];

  return (
    <EmojiPicker categories={categories} />
  );
}

enum SuggestionMode {
  /** Show most recently used emojis */
  RECENT = 'recent',
  /** Show most frequently used emojis */
  FREQUENT = 'frequent'
}

import EmojiPicker, { SuggestionMode } from "emoji-picker-react";

// Show recently used emojis
function RecentModeExample() {
  return (
    <EmojiPicker suggestedEmojisMode={SuggestionMode.RECENT} />
  );
}

// Show frequently used emojis (default)
function FrequentModeExample() {
  return (
    <EmojiPicker suggestedEmojisMode={SuggestionMode.FREQUENT} />
  );
}

enum SkinTonePickerLocation {
  /** Show skin tone picker in the search area */
  SEARCH = 'SEARCH',
  /** Show skin tone picker in the preview area */
  PREVIEW = 'PREVIEW'
}

import EmojiPicker, { SkinTonePickerLocation } from "emoji-picker-react";

// Skin tone picker in search area (default)
function SearchLocationExample() {
  return (
    <EmojiPicker skinTonePickerLocation={SkinTonePickerLocation.SEARCH} />
  );
}

// Skin tone picker in preview area  
function PreviewLocationExample() {
  return (
    <EmojiPicker skinTonePickerLocation={SkinTonePickerLocation.PREVIEW} />
  );
}

// When search is disabled, skin tone picker automatically moves to preview
function DisabledSearchExample() {
  return (
    <EmojiPicker
      searchDisabled={true}
      // skinTonePickerLocation automatically becomes PREVIEW
    />
  );
}

/**
 * Function type for generating custom emoji image URLs
 * @param unified - Unicode identifier for the emoji
 * @param style - Emoji style being requested
 * @returns URL string pointing to the emoji image
 */
type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;

/**
 * Callback function type for emoji and reaction clicks
 * @param emoji - Data about the clicked emoji
 * @param event - The mouse event
 * @param api - Optional API object with utility functions
 */
type MouseDownEvent = (
  emoji: EmojiClickData,
  event: MouseEvent,
  api?: OnEmojiClickApi
) => void;

/**
 * Callback function type for skin tone changes
 * @param skinTone - The newly selected skin tone
 */
type OnSkinToneChange = (skinTone: SkinTones) => void;

import EmojiPicker, { EmojiStyle } from "emoji-picker-react";

// Custom CDN integration
function CustomCDNExample() {
  const customUrlGenerator = (unified: string, style: EmojiStyle) => {
    const baseUrl = "https://my-emoji-cdn.com";
    return `${baseUrl}/${style}/${unified}.png`;
  };

  return (
    <EmojiPicker
      getEmojiUrl={customUrlGenerator}
      emojiStyle={EmojiStyle.APPLE}
    />
  );
}

// Different URLs for different styles
function StyleSpecificUrlsExample() {
  const getEmojiUrl = (unified: string, style: EmojiStyle) => {
    const styleMap = {
      [EmojiStyle.APPLE]: "https://apple-emojis.com",
      [EmojiStyle.GOOGLE]: "https://google-emojis.com", 
      [EmojiStyle.TWITTER]: "https://twemoji.maxcdn.com",
      [EmojiStyle.FACEBOOK]: "https://facebook-emojis.com",
      [EmojiStyle.NATIVE]: "" // Native doesn't need URLs
    };
    
    const baseUrl = styleMap[style];
    return baseUrl ? `${baseUrl}/v/latest/${unified}.png` : "";
  };

  return (
    <EmojiPicker
      getEmojiUrl={getEmojiUrl}
      emojiStyle={EmojiStyle.TWITTER}
    />
  );
}

/**
 * Array of emoji unified codes to hide from the picker
 */
type HiddenEmojis = string[];

import EmojiPicker from "emoji-picker-react";

function HiddenEmojisExample() {
  const hiddenEmojis = [
    "1f4a9", // 💩 pile of poo
    "1f595", // 🖕 middle finger
    "1f621"  // 😡 pouting face
  ];

  return (
    <EmojiPicker hiddenEmojis={hiddenEmojis} />
  );
}

/**
 * Emoji version string to limit compatibility
 * Examples: "1.0", "2.0", "12.0", "13.0", "14.0", "15.0"
 */
type EmojiVersion = string;

import EmojiPicker from "emoji-picker-react";

// Limit to emojis from Unicode 12.0 and earlier
function CompatibilityExample() {
  return (
    <EmojiPicker emojiVersion="12.0" />
  );
}

/**
 * Flexible dimension type - numbers treated as pixels, strings passed as CSS values
 */
type PickerDimensions = string | number;

import EmojiPicker from "emoji-picker-react";

// Different dimension formats
function DimensionsExample() {
  return (
    <div>
      {/* Pixel values */}
      <EmojiPicker width={400} height={500} />
      
      {/* CSS string values */}
      <EmojiPicker width="100%" height="50vh" />
      
      {/* Mixed formats */}
      <EmojiPicker width="320px" height={400} />
    </div>
  );
}