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

| Name | Type | Default | Description | | :----------- | :------- | :---------- | :-------------------------------------------------------------------------------- | | set | string | apple | Emoji icon set: apple,facebook,twitter,google, native | | emojiSize | number | 32 | Emojis size for the picker | | sheetSize | string | 64 | The emoji sheet sizes are: 32,64 | | emojiSpacing | number | 12 | Gap between emojis | | emojiVersion | number | 12.1 | version of the emoji list | | quality | string | clean | quality of the spreadsheet; 128,256,clean | | mode | string | dark | Switch between dark and light | | onEmojiClick | Function | undefined | Returns the native emoji | | tabsVariant | string | default | Set to fullWidth or default | | styles | Object | undefined | Customize the picker elements such as indicator color, background color and fonts |

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

| Name | Type | Default | Description | | :------ | :----- | :------ | :-------------------------------------------------------------- | | unicode | string | | Native emoji | | size | number | 32 | Width and height of the emoji | | set | string | apple | Emoji icon set: apple,facebook,twitter,google, native | | quality | string | clean | quality of the spreadsheet; 128,256,clean |

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