react-emoji-search v2.2.27

React emoji search

Demo

Features:

• Fully customizable
• Faster load for high quality emojis
• Emojis skin tones
• Recently used emojis support
• Emoji sets: facebook, apple, google and twitter
• light and dark mode

Installation

npm install react-emoji-search

Usage

Emoji Picker

import React from "react";
import { EmojiPicker, Emoji } from "react-emoji-search";

<EmojiPicker set="apple" />

<EmojiPicker set="apple" emojiSize={24} emojiSpacing={8}/>
<EmojiPicker emojiVersion={12.0}/>
<EmojiPicker onEmojiClick={(emoji) => setEmoji(emoji)} />
<EmojiPicker
  styles={{
    backgroundColor: "#2e4960",
    indicatorColor: "#b04c2d",
    fontColor: "lightgrey",
    searchBackgroundColor: "#263d51",
    tabsFontColor: "#8cdce4",
    searchFontColor: "lightgrey",
    skinTonePickerBackgroundColor: "#284155",
  }}
/>

Properties

Styling

You can make the picker adjust to your needs with the following props:

// styles
{
  backgroundColor: "...",
  indicatorColor: "...",
  fontColor: "...",
  tabsFontColor: "...",
  searchFontColor: "...",
  variationPickerBackgroundColor: "...",
}

Sprite Sheets

The sprite sheets comes from jsDelivr thanks to emoji-datasource package.

You can check the used sprite sheets through these links:

• apple
• facebook
• twitter
• google

Emoji

Get emoji from native. This component will attempt to find the emoji and render from the specified set. If not found it will render interrogation emoji (❓).

import React from "react";
import { Emoji } from "react-emoji-search";

<Emoji unicode="✌🏽" />
<Emoji unicode="🥸" set="facebook" size={24} />
<Emoji unicode="👀" set="twitter" quality="256" />

Properties

When you set styles, it will override dark and light mode colors