Home

Awesome

Emoji Picker React (v4) | Live Demo

Picker

Usage as a Reactions Picker

image

reactions

If you enjoy using emoji-picker-react<br/> You should also consider trying:<br/> <img src="https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png" height="16"/> Vest validation framework.<br/>


What to know before using

Installation

npm install emoji-picker-react

Usage

import EmojiPicker from 'emoji-picker-react';

function App() {
  return (
    <div>
      <EmojiPicker />
    </div>
  );
}

Shout Outs

Component Design 🎨
<a href="https://pavelbolo.com" target="_blank">317751726_1277528579755086_5320360926126813336_n copy</a>
<a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a>

Features

Props

The following props are accepted by them picker:

PropTypeDefaultDescription
openbooleantrueControls whether the picker is open or not.
onEmojiClickfunctionCallback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.
autoFocusSearchbooleantrueControls the auto focus of the search input.
ThemestringlightControls the theme of the picker. Possible values are light, dark and auto.
emojiStylestringappleControls the emoji style. Possible values are google, apple, facebook, twitter and native.
defaultSkinTonestringneutralControls the default skin tone.
lazyLoadEmojisbooleanfalseControls whether the emojis are loaded lazily or not.
previewConfigobject{}Controls the preview of the emoji. See below for more information.
searchPlaceholderstringSearchControls the placeholder of the search input.
suggestedEmojisModestringfrequentControls the suggested emojis mode. Possible values are frequent and recent.
skinTonesDisabledbooleanfalseControls whether the skin tones are disabled or not.
searchDisabledbooleanfalseControls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.
skinTonePickerLocationstringSEARCHControls the location of the skin tone picker. Possible values are SEARCH and PREVIEW.
emojiVersionstring-Allows displaying emojis up to a certain version for compatibility.
classNamestring-Adds a class name to the root element of the picker.
widthnumber/string350Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
heightnumber/string450Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.
styleReact.CSSProperties{}Adds inline style to the root element of the picker.
getEmojiUrlFunction-Allows to customize the emoji url and provide your own image host.
categoriesArray-Allows full config over ordering, naming and display of categories.
customEmojisArray<{names: string[], imgUrl: string, id: string}>-Allows adding custom emojis to the picker.
hiddenEmojisstring[]-Controls the emojis that are hidden from the picker.
reactionsDefaultOpenbooleanfalseControls whether the reactions picker is on the initial mount instead of the main picker component.
reactionsstring[]-Controls the reactions to display in the reactions picker. Takes unified emoji ids
onReactionClickFunction-Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used.
allowExpandReactionsbooleantrueControls whether the reactions picker can be expanded to the main picker.
onSkinToneChangeFunction-Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter.

Full details

The skin tones typescript enum can be imported directly from the package:

import { SkinTones } from 'emoji-picker-react';
{
  defaultEmoji: string; // defaults to: "1f60a"
  defaultCaption: string; // defaults to: "What's your mood?"
  showPreview: boolean; // defaults to: true
}

customEmojis - Custom Emojis

The customEmojis prop allows you to add custom emojis to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:

hiddenEmojis - Excluding certain emojis

The hiddenEmojis prop allows you to hide emojis from the picker. The hidden emojis prop takes an array of emoji unicode names to hide.

For example:

['1f600', '1f601', '1f602']; // will remove: 😀, 😁, 😂

Usage Example

<Picker
  customEmojis={[
    {
      names: ['Alice', 'alice in wonderland'],
      imgUrl:
        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/alice.png',
      id: 'alice'
    },
    {
      names: ['Dog'],
      imgUrl:
        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/dog.png',
      id: 'dog'
    },
    {
      names: ['Hat'],
      imgUrl:
        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/hat.png',
      id: 'hat'
    },
    {
      names: ['Vest'],
      imgUrl:
        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png',
      id: 'vest'
    }
  ]}
/>

Here are some additional things to keep in mind about custom emojis:

Reactions Picker

image

reactions

The picker can be used as a reactions picker. To use it as a reactions picker, you should set the reactionsDefaultOpen prop to true. This will cause the picker to the reactions picker on the initial mount instead of the main picker component.

To customize the reactions, you should pass an array of unified emoji ids to the reactions prop.

The reactions picker uses the same event handlers, and the same css variables for customizations.

<Picker reactionsDefaultOpen={true} onReactionClick={handleReaction} />

Customization

Custom Picker Width and Height

To customize the dimensions of the picker, use the height and width props. You can pass in a number that will be treated as pixel size, or your any accepted css width/height as string.

<EmojiPicker height={500} width={400} />
<EmojiPicker height="100%" width="15em" />

CSS Variables

The picker can be customized via css variables. The root selector for the picker is .EmojiPickerReact, when overriding, make sure to provide a more specific selector.

In dark mode, the specific selector is .EmojiPickerReact.epr-dark-theme.

The list of possible variables is quite extensive, but the main ones you may want to override are:

Rendering Output Emojis in Your App

The picker exports an Emoji component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.

Props

NameTypeDefaultDescription
unifiedstring""The unified code of the emoji.
sizenumber32The size of the emoji.
emojiStyleEmojiStyleEmojiStyle.APPLEThe emoji style to use. Can be either apple, google, facebook, twitter or native.
lazyLoadbooleanfalseWhether to lazy load the emoji. image
emojiUrlstring-The url of the emoji image to render. Useful for custom emojis.
getEmojiUrlFunction-Allows to customize the emoji url and provide your own image host for dynamic resolution.
import { Emoji, EmojiStyle } from 'emoji-picker-react';

export function MyApp() {
  return (
    <p>
      My Favorite emoji is:
      <Emoji unified="1f423" size="25" />
    </p>
  );
}

How to Contribute?

Check out the contributing documentation to get information about contributing, reporting bugs, suggesting enhancements, and writing code changes to the project!

Troubleshooting

Error Boundary

emoji-picker-react has a top-level error boundary, trying to catch rendering errors. It won't catch server side related errors, or event handlers errors. If an error is caught, the picker will not render, and a console error will be logged.

Next.js

To avoid errors such as "document is not defined" on the server side, you should make sure the library is only imported on the client side. Here is how to do that:

import dynamic from 'next/dynamic';

const Picker = dynamic(
  () => {
    return import('emoji-picker-react');
  },
  { ssr: false }
);

Vite

For reference, if you only need to shim global, you can add

<script>
  window.global = window;
</script>