react-emoji-toggle-button · ·

A customizable and lightweight React component that lets users pick emojis through a beautiful button-triggered picker. Supports light/dark themes, (Arabic and English), recent emojis, flag emojis, and much more 🚀.

Features

Customizable: Easily style the picker to match your application's theme and preferences.
Light/Dark Themes: Choose between light and dark themes to suit your design.
Arabic and English Support: Supports 2 languages for a seamless user experience.
Recent Emojis: Keep track of recently used emojis for quick access.
Flag Emojis: Supports flag emojis for a more localized experience.
Customizable Sizes: Adjust the picker's size to fit your design.
Prevent Bad Emojis: Filter out a predefined list of unwanted emojis.
Customizable Bad Emoji List: Provide your own list of emojis to filter out.

Note: You must connect the <EmojiPickerButton /> to the ref of your text input or textarea for it to work correctly.

Live Demo

You can try the Emoji Picker Button live here: Demo

Flag Emoji Support

When using country flag emojis in your application, you must use the following font family to ensure proper rendering across all platforms:

font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", serif;

This font family ensures that flag emojis are displayed consistently across platforms, providing a seamless user experience.

Installation

You can install the react-emoji-toggle-button package using npm:

npm install react-emoji-toggle-button

You can also install it using yarn:

yarn add react-emoji-toggle-button

EmojiPickerButton Props

The EmojiPickerButton component is highly customizable. Below is a table describing all available props, their types, default values, and descriptions:

Prop Name	Type	Default Value	Description
`textInputRef`	`RefObject<HTMLInputElement \| HTMLTextAreaElement \| null>`	Required	Reference to the input or textarea element where the emoji will be inserted.
`classNames`	`EmojiPickerClassNames`	`{}`	Custom CSS class names for different parts of the picker.
`config`	`EmojiPickerConfig`	`{}`	Advanced configuration options for the picker (see below for details).
`initialCategory`	`string`	`undefined`	The category to be active initially when the picker opens.
`onEmojiSelect`	`(emoji: string) => void`	`undefined`	Callback function triggered when an emoji is selected.
`styles`	`EmojiPickerStyles`	`{}`	Custom inline styles for different parts of the picker.
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-left"`	Position of the emoji picker relative to the button.
`theme`	`"light" \| "dark"`	`"light"`	Theme of the picker (light or dark).
`themeConfig`	`ThemeConfig`	`defaultThemeConfig`	Custom theme configuration for light, dark, or custom themes.
`lang`	`"en" \| "ar"`	`"en"`	Language for the picker UI (English or Arabic).
`enableRecentEmojis`	`boolean`	`true`	Enable or disable tracking and showing recent emojis.
`sizes`	`EmojiPickerSizes`	`{}`	Custom size configuration for the picker (overrides default sizes).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Predefined size for the picker (small, medium, large).
`enableTabsTitleEmoji`	`boolean`	`true`	Show emoji icons in the category tabs.
`preventBadEmojis`	`boolean`	`true`	Filter out a predefined list of unwanted emojis.
`badEmojiList`	`string[]`	`defaultBadEmojisList`	Custom list of emojis to filter out (overrides the default list).

Types Reference

EmojiPickerClassNames: Custom class names for styling (see below for structure).
EmojiPickerConfig: Advanced configuration options for the picker (see below for structure).
EmojiPickerStyles: Custom inline styles for different picker parts (see below for structure).
ThemeConfig: Theme color configuration for light, dark, and custom themes.
EmojiPickerSizes: Size configuration for the picker.

EmojiPickerClassNames

interface EmojiPickerClassNames {
  container?: string;
  tabs?: string;
  tabButton?: string;
  activeTabButton?: string;
  searchInput?: string;
  emojiList?: string;
  emojiButton?: string;
  noResultsMessage?: string;
  emojiRow?: string;
}

EmojiPickerStyles

interface EmojiPickerStyles {
  container?: CSSProperties;
  tabs?: CSSProperties;
  tabButton?: CSSProperties;
  activeTabButton?: CSSProperties;
  searchInput?: CSSProperties;
  emojiList?: CSSProperties;
  emojiButton?: CSSProperties;
  noResultsMessage?: CSSProperties;
}

EmojiPickerConfig

interface EmojiPickerConfig {
  emojisPerRow?: number;
  emojiItemSize?: number;
  pickerWidth?: number | string;
  pickerHeight?: number | string;
  listHeight?: number;
  fontFamily?: string;
  searchPlaceholder?: string;
  noResultsMessage?: string;
  applyEmojiFont?: boolean;
  themeConfig?: ThemeConfig;
  enableRecentEmojis?: boolean;
  recentEmojisLabel?: string;
}

EmojiPickerSizes

type EmojiPickerSizes = {
  pickerWidth?: number;
  pickerHeight?: number;
  emojiItemSize?: number;
  listHeight?: number;
  emojisPerRow?: number;
};

ThemeConfig

interface ThemeColors {
  backgroundColor: string;
  textColor: string;
  borderColor: string;
  tabActiveBackgroundColor: string;
  tabActiveBorderColor: string;
  tabHoverBackgroundColor: string;
  scrollbarThumbColor: string;
  scrollbarThumbHoverColor: string;
  inputBorderColor: string;
  boxShadowColor: string;
  noResultsTextColor: string;
}

interface ThemeConfig {
  light: ThemeColors;
  dark: ThemeColors;
  custom?: Record<string, ThemeColors>;
}

License

MIT