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