A friendly Emoji picker for Emojione written as a React component. It looks a little something like this, but is easily customized:
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.
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} />
You can easily customize the category icons by passing in alternatives to the component constructor. The icon strings come from the shortname value in strategy.js
var categories = {
people: 'smile',
nature: 'mouse',
foods: 'burger',
activity: 'soccer',
travel: 'earth_asia',
objects: 'bulb',
symbols: 'clock9',
flags: 'flag_cn'
}
<EmojiPicker categories={categories} />npm install
npm run preview
Open examples/index.html in a browser to see a preview of the picker.