Emoji Component

/**
 * Standalone emoji rendering component
 * @param props - Configuration for the emoji display
 * @returns JSX element displaying the emoji
 */
declare const Emoji: (props: {
  /** Unicode identifier for the emoji (required) */
  unified: string;
  /** Visual style of the emoji */
  emojiStyle?: EmojiStyle;
  /** Size of the emoji in pixels */
  size?: number;
  /** Whether to load the emoji image lazily */
  lazyLoad?: boolean;
  /** Custom function to generate emoji image URL */
  getEmojiUrl?: GetEmojiUrl;
  /** Direct URL to the emoji image (overrides getEmojiUrl) */
  emojiUrl?: string;
}) => JSX.Element;

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

// Basic emoji rendering
function BasicEmoji() {
  return <Emoji unified="1f60a" size={32} />;
}

// Different emoji styles
function StyledEmojis() {
  return (
    <div>
      <Emoji unified="1f44d" emojiStyle={EmojiStyle.APPLE} size={24} />
      <Emoji unified="1f44d" emojiStyle={EmojiStyle.GOOGLE} size={24} />
      <Emoji unified="1f44d" emojiStyle={EmojiStyle.TWITTER} size={24} />
      <Emoji unified="1f44d" emojiStyle={EmojiStyle.FACEBOOK} size={24} />
    </div>
  );
}

// Custom emoji URL
function CustomEmojiUrl() {
  return (
    <Emoji
      unified="1f389"
      emojiUrl="https://cdn.example.com/emojis/party.png"
      size={48}
    />
  );
}

// Lazy loading for performance
function LazyEmoji() {
  return (
    <Emoji
      unified="1f680"
      size={64}
      lazyLoad={true}
      emojiStyle={EmojiStyle.APPLE}
    />
  );
}

// Custom emoji URL generation
function CustomUrlGeneration() {
  const customUrlGenerator = (unified: string, style: EmojiStyle) => {
    return `https://my-cdn.com/emojis/${style}/${unified}.png`;
  };

  return (
    <Emoji
      unified="1f4a9"
      getEmojiUrl={customUrlGenerator}
      emojiStyle={EmojiStyle.APPLE}
      size={32}
    />
  );
}

interface EmojiProps {
  /** 
   * Unicode identifier for the emoji (e.g., "1f60a" for 😊)
   * Required to identify which emoji to render
   */
  unified: string;
  
  /** 
   * Visual style/set for the emoji
   * @default EmojiStyle.APPLE 
   */
  emojiStyle?: EmojiStyle;
  
  /** 
   * Size of the emoji in pixels
   * @default 32 
   */
  size?: number;
  
  /** 
   * Whether to load the emoji image lazily for performance
   * @default false 
   */
  lazyLoad?: boolean;
  
  /** 
   * Custom function to generate emoji image URLs
   * Receives unified code and style, returns image URL
   */
  getEmojiUrl?: GetEmojiUrl;
  
  /** 
   * Direct URL to the emoji image
   * If provided, overrides getEmojiUrl and default URL generation
   */
  emojiUrl?: string;
}

/**
 * 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;

// Examples of unified codes:
"1f60a"     // 😊 smiling face with smiling eyes
"1f44d"     // 👍 thumbs up
"2764-fe0f" // ❤️ red heart
"1f1fa-1f1f8" // 🇺🇸 US flag (multi-part emoji)
"1f44d-1f3fb" // 👍🏻 thumbs up with light skin tone

import { Emoji, SkinTones } from "emoji-picker-react";

function SkinToneExamples() {
  return (
    <div>
      {/* Base emoji without skin tone */}
      <Emoji unified="1f44d" size={32} />
      
      {/* With different skin tones */}
      <Emoji unified="1f44d-1f3fb" size={32} /> {/* Light */}
      <Emoji unified="1f44d-1f3fc" size={32} /> {/* Medium-light */}
      <Emoji unified="1f44d-1f3fd" size={32} /> {/* Medium */}
      <Emoji unified="1f44d-1f3fe" size={32} /> {/* Medium-dark */}
      <Emoji unified="1f44d-1f3ff" size={32} /> {/* Dark */}
    </div>
  );
}

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

function EmojiApp() {
  const [selectedEmoji, setSelectedEmoji] = useState<EmojiClickData | null>(null);

  return (
    <div>
      <EmojiPicker
        onEmojiClick={(emojiData) => setSelectedEmoji(emojiData)}
      />
      
      {selectedEmoji && (
        <div>
          <p>You selected:</p>
          <Emoji
            unified={selectedEmoji.unified}
            size={48}
          />
          <p>{selectedEmoji.names[0]}</p>
        </div>
      )}
    </div>
  );
}