Emoji Picker

A friendly Emoji picker for Emojione written as a React component. It looks a little something like this, but is easily customized:

Emoji Picker


npm install emojione-picker


The npm module includes a pre-transpiled version of the picker so you don't need to run it through your JSX pipeline. Simply require the module like any other.

var EmojiPicker = require('emojione-picker');

<EmojiPicker onChange={function(data){
  console.log("Emoji chosen", data);
}} />

The module also includes CSS at css/picker.css which you can copy and edit or ideally reference directly from within the node_modules directory. Let me know if you're using this in production - i'd love to see it in action!


You can manually pass in a search term as a component prop to filter which emoji's are displayed by default, for example:

<EmojiPicker search="smile" />

Or allow the user to search by passing a boolean true, this will enable a search input within the picker:

<EmojiPicker search={true} />

Emoji Picker with Search


You can easily customize the category icons by passing in alternatives to the component constructor. The emoji strings come from the shortname value in strategy.js

var categories = {
  people: {
    emoji: 'smile'
  nature: {
    title: 'Nature',
    emoji: 'mouse'
  foods: {
    title: 'Food & Drink',
    emoji: 'burger'

<EmojiPicker categories={categories} />


npm install
npm run preview

Open examples/index.html in a browser to see a preview of the picker.


MIT License