React Emoji Picker V2
V2 Changes
- Updated UI
- Removed customization props, moved to SASS variables
- Improved filtering performance
npm i emoji-picker-react --save An easy to use React Emoji Picker Module.
Usage:
import React, {Component} from 'react'; import EmojiPicker from 'emoji-picker-react'; class MyComponent extends Component { render() { return ( <EmojiPicker onEmojiClick={myCallback}/> ); } } UI Customization
You can use custom CSS to modify each part of the picker's visibility. COMPATABILITY NOTE The markup of the picker is guaranteed to stay unchanged through each major version (with the exception of bugfixes), meaning you can safely assume the markup stays the same until version 3 gets released.
Customization via SCSS variables
If your project uses SCSS, you can more easily customize your picker's visibility using the predefined SASS variables (click to see all variables). To customize the picker using these variables, you will need to import the picker in two parts - js and css.
// MyComponent.js import EmojiPicker from 'emoji-picker-react'; import 'emoji-picker-react/dist/universal/style.scss'; // or any other way you consume scss files class MyComponent { // ... }Then you will need to import the stylesheet file from your own stylesheet, and override the default variables with your own.
// style.scss $size_emoji: 10px; $width_picker: 300px; $height_picker: 350px; $bg_picker: #f1f1f1; @import './node_modules/emoji-picker-react/dist/universal/style.scss'; // relative path to your node modules 
Using custom category titles
If you want to modify the currently existing category names, simply pass a mapping object with the names you would like to replace, for example:
const customNames = { foods: 'food and drink', nature: 'outdoors', objects: 'stuff' }; <EmojiPicker customCategoryNames={customNames}/>Replacing the title will also remove the hash (#) sign from the title.
Here is the list of all category names, accepted by customCategoryNames: people, foods, nature, activity, objects, places, flags, symbols
Disabling the diversity picker
The per emoji diversity gets triggered on hover or long click by default. By passing the prop disableDiversityPicker to the picker, it will be disabled and not get triggered.
<EmojiPicker disableDiversityPicker/>Preloading all images
By default, each emoji category is loaded when first viewing it to reduce initial load time and improve perceived performance. This can sometimes take a while. In some cases you would want to load all images at once, for example, when lazy loading the picker in the background regardless of user interaction.
In which case, simply pass the preload prop:
<EmojiPicker preload/>Getting the clicked-on emoji
In order to use the picker in your application, you need a way to grab the name and code of the clicked-on emoji. To do this, you just need to pass the onEmojiClick prop. It should be a callback function to your application, and it should get two arguments: the emoji code, and the rest of the emoji data.
Clicking on an emoji should result in a similar output:
["261d-1f3ff", Object, Event] 0: "261d-1f3ff" ā¶1: Object shortname: "point_up" category: "people" order: 206 ā¶diversities: Array[5] 0: "261d-1f3fb" 1: "261d-1f3fc" 2: "261d-1f3fd" 3: "261d-1f3fe" 4: "261d-1f3ff"Integrating with your app
So, you got the emoji the user clicked on, what do you do next? I have found that the easiest way to convert the emojis into images on my site, or as unicode characters, is by using iamcal/js-emoji. This guy wrote an amazing library that allows you to take the emoji name (needed to be wrapped in colons, like that: :joy:), and convert them into whatever you like. This is what I use for the live-demo demonstration. It should be as simple as:
import JSEMOJI from 'emoji-js'; // you can import it with a script tag instead // new instance const jsemoji = new JSEMOJI(); // set the style to emojione (default - apple) jsemoji.img_set = 'emojione'; // set the storage location for all emojis jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/gh/iamcal/emoji-data@19299c91bc87374118f06b2760f1ced69d714ab1/img-emojione-64/'; // some more settings... jsemoji.supports_css = false; jsemoji.allow_native = false; jsemoji.replace_mode = 'unified';and then, in your onEmojiClick callback:
jsemoji.replace_colons(`:${emojiName}:`);
Image hosting
CDN
All Emoji files are hosted on jsdeliver, and by default, the picker is configured to use it as the image source, with emojis of size 32x32px. You may also choose to serve 64x64px or 128x128px emojis, using the emojiResolution prop.
<EmojiPicker emojiResolution="64"/>For more info on the hosted emojis: http://www.jsdelivr.com/projects/emojione
Self hosting of emojis
You could also serve the emojis from your own server or CDN using the assetPath prop. You will then need to serve all emojis from a directory named after the desired image resolution. To specify resolution other than 32, you will need to pass an additional prop - emojiResolution.
If you want to serve 64px emojis from your own website, it will need to look somewhat like this:
<EmojiPicker assetPath="http://example.com/emojis" emojiResolution="64"/>The picker will internally construct the image urls to appear like this: http://example.com/emojis/64/1f448-1f3fd.png (1f448-1f3fd.png is an emoji filename + extension)
Cool stuff
Per Emoji diversity picker
Long clicking on diversity (skin-tone) enabled Emojies (mostly the hand Emojis), will open a list of all skin tones for this Emoji.
Attributions
You can use this picker, free of charge, no attribution is needed. The emojis have their own license.
All emoji images in this project are the property of the Emojione. Usage of the images is subjeced to their free license.
Other shout-outs:
- iamcal/emoji-data An amazing project, containing emoji data. All the info (names, keywords, etc) in this picker is generated from their data.
- throttle-debounce npm package, used multiple times in the project.
- iconmonstr used for the category icons.
- React Storybook, made building the live demo fast and simple.
