react-emoji-search
TypeScript icon, indicating that this package has built-in type declarations

2.2.27 • Public • Published

React emoji search

Emoji picker displayed just like Whatsapp.

Demo

Build StatusBuild StatusBuild Status

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
Buy Me A Coffee

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:

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

Readme

Keywords

Package Sidebar

Install

npm i react-emoji-search

Weekly Downloads

37

Version

2.2.27

License

MIT

Unpacked Size

867 kB

Total Files

18

Last publish

Collaborators

  • zukko92