schonfeld / emojione-picker

A react emoji picker for use with emojione

Emoji Picker

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

Installation

npm install emojione-picker

Usage

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!

Filtering

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} />

Customization

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: {
    title:'People',
    emoji: 'smile'
  },
  nature: {
    title: 'Nature',
    emoji: 'mouse'
  },
  foods: {
    title: 'Food & Drink',
    emoji: 'burger'
  }
}

<EmojiPicker categories={categories} />

Development

npm install
npm run preview

Open examples/index.html in a browser to see a preview of the picker. To create a release:

npm run build

License

MIT License