or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdemoji-component.mdemoji-picker-component.mdindex.mdreactions-mode.md
tile.json

emoji-component.mddocs/

Emoji Component

The standalone Emoji component allows you to render individual emojis anywhere in your React application with customizable styling and sizing, independent of the full picker interface.

Capabilities

Emoji Component

Renders a single emoji with configurable style, size, and loading behavior.

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

Usage Examples:

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

Emoji Props Interface

Complete interface for the Emoji component props.

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

GetEmojiUrl Function Type

Type definition for custom emoji URL generation function.

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

Emoji Unicode Identifiers

Emojis are identified using their Unicode code points in hex format without the "U+" prefix:

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

Skin Tone Variations

For emojis that support skin tone variations, append the skin tone code to the base emoji:

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

Performance Considerations

The Emoji component is optimized for performance:

  • Lazy Loading: Use lazyLoad={true} for emojis not immediately visible
  • Caching: Emoji images are automatically cached by the browser
  • Size Optimization: Specify appropriate size prop to avoid unnecessary scaling
  • Custom URLs: Use getEmojiUrl for CDN integration and custom emoji sets

Error Handling

The component handles various error scenarios gracefully:

  • Invalid unified codes: Returns null without throwing
  • Missing images: Falls back to Unicode character if available
  • Network errors: Retries image loading automatically
  • Unsupported styles: Falls back to default style

Integration with EmojiPicker

The Emoji component works seamlessly with data from the EmojiPicker:

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