Emoji Picker React is a comprehensive emoji picker component for React applications on the web. It provides a feature-rich interface with extensive customization options including multiple emoji styles (Apple, Google, Facebook, Twitter, Native), theme support (light, dark, auto), skin tone selection, custom emoji support, and both traditional picker and reactions picker modes.
npm install emoji-picker-reactimport EmojiPicker, { Emoji, EmojiStyle, Theme, SkinTones, Categories } from "emoji-picker-react";For CommonJS:
const EmojiPicker = require("emoji-picker-react");
const { Emoji, EmojiStyle, Theme, SkinTones, Categories } = EmojiPicker;import EmojiPicker, { EmojiClickData } from "emoji-picker-react";
function App() {
const onEmojiClick = (emojiData: EmojiClickData) => {
console.log(emojiData.emoji); // The actual emoji character
console.log(emojiData.unified); // Unicode representation
};
return (
<div>
<EmojiPicker onEmojiClick={onEmojiClick} />
</div>
);
}With configuration:
import EmojiPicker, { Theme, EmojiStyle, SkinTones } from "emoji-picker-react";
function App() {
return (
<EmojiPicker
theme={Theme.DARK}
emojiStyle={EmojiStyle.APPLE}
defaultSkinTone={SkinTones.MEDIUM}
width={400}
height={500}
searchPlaceholder="Search emojis..."
onEmojiClick={(emojiData) => console.log(emojiData)}
/>
);
}Emoji Picker React is built around several key components:
The main emoji picker component providing full emoji selection interface with search, categories, skin tones, and preview functionality.
declare const EmojiPicker: (props: PickerProps) => JSX.Element;
type OnEmojiClickApi = {
collapseToReactions: () => void;
};
interface PickerProps {
/** Callback fired when an emoji is clicked */
onEmojiClick?: MouseDownEvent;
/** Callback fired when a reaction emoji is clicked */
onReactionClick?: MouseDownEvent;
/** Callback fired when skin tone is changed */
onSkinToneChange?: OnSkinToneChange;
/** Controls the theme of the picker */
theme?: Theme;
/** Controls the emoji style/set to display */
emojiStyle?: EmojiStyle;
/** Width of the picker (number treated as pixels) */
width?: PickerDimensions;
/** Height of the picker (number treated as pixels) */
height?: PickerDimensions;
/** Default skin tone for emojis that support variations */
defaultSkinTone?: SkinTones;
/** Placeholder text for the search input */
searchPlaceholder?: string;
/** Alternative placeholder text for the search input (legacy prop) */
searchPlaceHolder?: string;
/** Whether to auto-focus the search input on mount */
autoFocusSearch?: boolean;
/** Whether to load emojis lazily for performance */
lazyLoadEmojis?: boolean;
/** Whether to disable skin tone selection */
skinTonesDisabled?: boolean;
/** Whether to disable the search functionality */
searchDisabled?: boolean;
/** Configuration for the emoji preview section */
previewConfig?: Partial<PreviewConfig>;
/** Array of custom emojis to include */
customEmojis?: CustomEmoji[];
/** Custom category configuration */
categories?: CategoriesConfig;
/** Array of emoji unified codes to hide */
hiddenEmojis?: string[];
/** Whether to open in reactions mode initially */
reactionsDefaultOpen?: boolean;
/** Array of reaction emoji unified codes */
reactions?: string[];
/** Whether users can expand from reactions to full picker */
allowExpandReactions?: boolean;
/** CSS class name to apply to the root element */
className?: string;
/** Inline styles to apply to the root element */
style?: React.CSSProperties;
/** Whether the picker is open/visible */
open?: boolean;
/** Custom function to generate emoji image URLs */
getEmojiUrl?: GetEmojiUrl;
/** Mode for suggested emojis display */
suggestedEmojisMode?: SuggestionMode;
/** Location of the skin tone picker */
skinTonePickerLocation?: SkinTonePickerLocation;
/** Emoji version limit for compatibility */
emojiVersion?: string | null;
}Render individual emojis with customizable style and size outside of the picker interface.
declare const Emoji: (props: {
unified: string;
emojiStyle?: EmojiStyle;
size?: number;
lazyLoad?: boolean;
getEmojiUrl?: GetEmojiUrl;
emojiUrl?: string;
}) => JSX.Element;Comprehensive configuration system for customizing picker behavior, appearance, and functionality.
interface PreviewConfig {
defaultEmoji: string;
defaultCaption: string;
showPreview: boolean;
}
interface CustomEmoji {
names: string[];
imgUrl: string;
id: string;
}
interface CategoryConfig {
category: Categories;
name: string;
}
type UserCategoryConfig = Array<Categories | CategoryConfig>;
type CategoriesConfig = Array<Categories | CategoryConfig>;
type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
type MouseDownEvent = (
emoji: EmojiClickData,
event: MouseEvent,
api?: OnEmojiClickApi
) => void;
type OnSkinToneChange = (skinTone: SkinTones) => void;
type PickerDimensions = string | number;Alternative interface mode showing only selected reaction emojis for quick emoji responses.
// Enable reactions mode
const pickerProps = {
reactionsDefaultOpen: true,
reactions: ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621'],
onReactionClick: (emojiData: EmojiClickData) => void,
allowExpandReactions: true
};interface EmojiClickData {
activeSkinTone: SkinTones;
unified: string;
unifiedWithoutSkinTone: string;
emoji: string;
names: string[];
imageUrl: string;
getImageUrl: (emojiStyle?: EmojiStyle) => string;
isCustom: boolean;
}
enum EmojiStyle {
NATIVE = 'native',
APPLE = 'apple',
TWITTER = 'twitter',
GOOGLE = 'google',
FACEBOOK = 'facebook'
}
enum Theme {
DARK = 'dark',
LIGHT = 'light',
AUTO = 'auto'
}
enum SkinTones {
NEUTRAL = 'neutral',
LIGHT = '1f3fb',
MEDIUM_LIGHT = '1f3fc',
MEDIUM = '1f3fd',
MEDIUM_DARK = '1f3fe',
DARK = '1f3ff'
}
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'
}
enum SuggestionMode {
RECENT = 'recent',
FREQUENT = 'frequent'
}
enum SkinTonePickerLocation {
SEARCH = 'SEARCH',
PREVIEW = 'PREVIEW'
}