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

reactions-mode.mddocs/

Reactions Mode

The reactions picker provides a compact interface for quick emoji reactions, displaying only a selected set of reaction emojis instead of the full picker interface.

Capabilities

Reactions Picker Configuration

Enable and configure the reactions picker mode for quick emoji responses.

type OnEmojiClickApi = {
  collapseToReactions: () => void;
};
interface ReactionsConfig {
  /** Whether to open in reactions mode initially */
  reactionsDefaultOpen?: boolean;
  /** Array of emoji unified codes to show as reactions */
  reactions?: string[];
  /** Callback fired when a reaction emoji is clicked */
  onReactionClick?: MouseDownEvent;
  /** Whether users can expand from reactions to full picker */
  allowExpandReactions?: boolean;
}

Usage Examples:

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

// Basic reactions picker
function BasicReactionsExample() {
  const handleReaction = (emojiData: EmojiClickData) => {
    console.log("Reaction:", emojiData.emoji);
  };

  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      onReactionClick={handleReaction}
    />
  );
}

// Custom reactions set
function CustomReactionsExample() {
  const customReactions = [
    "1f44d", // πŸ‘ thumbs up
    "1f44e", // πŸ‘Ž thumbs down
    "1f602", // πŸ˜‚ face with tears of joy
    "1f622", // 😒 crying face
    "1f525", // πŸ”₯ fire
    "1f4af", // πŸ’― hundred points symbol
  ];

  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      reactions={customReactions}
      onReactionClick={(emojiData) => {
        console.log("Custom reaction:", emojiData.emoji);
      }}
    />
  );
}

// Reactions with expansion disabled
function LockedReactionsExample() {
  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      allowExpandReactions={false}
      reactions={["1f44d", "2764-fe0f", "1f602", "1f914"]}
      onReactionClick={(emojiData) => {
        // Handle reaction without allowing full picker access
        console.log("Locked reaction:", emojiData.emoji);
      }}
    />
  );
}

Default Reactions

The picker comes with a predefined set of common reaction emojis.

/**
 * Default reaction emojis used when no custom reactions are provided
 */
const DEFAULT_REACTIONS: string[] = [
  '1f44d',     // πŸ‘ thumbs up
  '2764-fe0f', // ❀️ red heart
  '1f603',     // πŸ˜ƒ grinning face with big eyes
  '1f622',     // 😒 crying face
  '1f64f',     // πŸ™ folded hands
  '1f44e',     // πŸ‘Ž thumbs down
  '1f621'      // 😑 pouting face
];

Usage Examples:

import EmojiPicker from "emoji-picker-react";

// Use default reactions
function DefaultReactionsExample() {
  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      // Uses DEFAULT_REACTIONS automatically
      onReactionClick={(emojiData) => {
        console.log("Default reaction:", emojiData.emoji);
      }}
    />
  );
}

Reaction Click Handler

Handle clicks on reaction emojis with a dedicated callback.

/**
 * Callback function for reaction emoji clicks (alias for MouseDownEvent)
 */
type OnReactionClick = MouseDownEvent;

Usage Examples:

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

function ReactionHandlerExample() {
  const handleReaction = (emojiData: EmojiClickData, event: MouseEvent) => {
    console.log("Reaction clicked:", {
      emoji: emojiData.emoji,
      unified: emojiData.unified,
      names: emojiData.names,
      isCustom: emojiData.isCustom
    });
    
    // You might send this to an API, update state, etc.
    // addReactionToMessage(messageId, emojiData.unified);
  };

  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      onReactionClick={handleReaction}
    />
  );
}

// Separate handlers for reactions vs full picker
function SeparateHandlersExample() {
  const handleReaction = (emojiData: EmojiClickData) => {
    console.log("Quick reaction:", emojiData.emoji);
    // Handle quick reactions (e.g., add to message)
  };

  const handleEmojiPick = (emojiData: EmojiClickData) => {
    console.log("Full emoji pick:", emojiData.emoji);
    // Handle full emoji selection (e.g., insert into text)
  };

  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      onReactionClick={handleReaction}
      onEmojiClick={handleEmojiPick}
      allowExpandReactions={true}
    />
  );
}

Expandable Reactions

Control whether users can expand from reactions mode to the full picker.

/**
 * Whether to allow expanding from reactions to full picker
 * @default true
 */
type AllowExpandReactions = boolean;

Usage Examples:

import EmojiPicker from "emoji-picker-react";

// Expandable reactions (default behavior)
function ExpandableReactionsExample() {
  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      allowExpandReactions={true}
      onReactionClick={(emoji) => console.log("Reaction:", emoji.emoji)}
      onEmojiClick={(emoji) => console.log("Full pick:", emoji.emoji)}
    />
  );
}

// Non-expandable reactions (reactions only)
function ReactionsOnlyExample() {
  return (
    <EmojiPicker
      reactionsDefaultOpen={true}
      allowExpandReactions={false}
      onReactionClick={(emoji) => console.log("Reaction only:", emoji.emoji)}
      // onEmojiClick won't be called since expansion is disabled
    />
  );
}

Reactions Mode State Management

Handle the state between reactions mode and full picker mode.

/**
 * Props for controlling reactions mode behavior
 */
interface ReactionsStateProps {
  /** Whether reactions mode is initially open */
  reactionsDefaultOpen: boolean;
  /** Whether to allow expansion to full picker */
  allowExpandReactions: boolean;
  /** Custom reactions array */
  reactions?: string[];
}

Usage Examples:

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

function StatefulReactionsExample() {
  const [showReactions, setShowReactions] = useState(true);

  const handleReaction = (emojiData: EmojiClickData) => {
    console.log("Quick reaction:", emojiData.emoji);
    // Optionally close after reaction
    // setShowReactions(false);
  };

  const handleFullEmojiPick = (emojiData: EmojiClickData) => {
    console.log("Full emoji selection:", emojiData.emoji);
    setShowReactions(false); // Close picker after selection
  };

  return (
    <div>
      <button onClick={() => setShowReactions(!showReactions)}>
        {showReactions ? "Hide" : "Show"} Reactions
      </button>
      
      {showReactions && (
        <EmojiPicker
          reactionsDefaultOpen={true}
          onReactionClick={handleReaction}
          onEmojiClick={handleFullEmojiPick}
          allowExpandReactions={true}
        />
      )}
    </div>
  );
}

Integration with Chat Applications

Common patterns for integrating reactions mode in messaging applications.

Usage Examples:

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

// Message reactions pattern
function MessageReactionsExample() {
  const [showReactionPicker, setShowReactionPicker] = useState(false);
  const messageId = "msg_123";

  const addReaction = (emojiData: EmojiClickData) => {
    // Add reaction to message
    console.log(`Adding ${emojiData.emoji} to message ${messageId}`);
    
    // Close picker after reaction
    setShowReactionPicker(false);
    
    // API call or state update
    // addReactionToMessage(messageId, emojiData.unified);
  };

  return (
    <div className="message">
      <p>This is a message</p>
      
      <button onClick={() => setShowReactionPicker(!showReactionPicker)}>
        Add Reaction
      </button>
      
      {showReactionPicker && (
        <EmojiPicker
          reactionsDefaultOpen={true}
          allowExpandReactions={false}
          onReactionClick={addReaction}
          reactions={[
            "1f44d", "1f44e", "1f602", "2764-fe0f", 
            "1f622", "1f44f", "1f525", "1f4af"
          ]}
        />
      )}
    </div>
  );
}

Performance Considerations

Reactions mode is optimized for quick interactions:

  • Faster Loading: Only loads reaction emojis initially
  • Lazy Expansion: Full picker loads only when expanded
  • Minimal DOM: Smaller interface reduces rendering overhead
  • Quick Interactions: Optimized for rapid emoji selection