Emoji picker displayed just like Whatsapp.
- Fully customizable
- Faster load for high quality emojis
- Emojis skin tones
- Recently used emojis support
- Emoji sets:
facebook
,apple
,google
andtwitter
-
light
anddark
mode
npm install react-emoji-search
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",
}}
/>
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 |
You can make the picker adjust to your needs with the following props:
// styles
{
backgroundColor: "...",
indicatorColor: "...",
fontColor: "...",
tabsFontColor: "...",
searchFontColor: "...",
variationPickerBackgroundColor: "...",
}
The sprite sheets comes from jsDelivr
thanks to emoji-datasource package.
You can check the used sprite sheets through these links:
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" />
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