react-emoji-search

React emoji search

Emoji picker displayed just like Whatsapp.

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