emjr v1.0.4
🐵 Emjr
A customizable React-based emoji picker.
📦 Installation
# With npm:
npm i --save emjr
# With yarn:
yarn emjr🐦 Components
Selector
import Selector from 'emjr';
<Selector set="twitter" />
<Selector onClick={emoji => console.log(emoji.name)} />
<Selector style={{position: 'absolute', top: 100, left: 100}} />
<Selector skin={2} autoFocus={true} />
<Selector phrases={{search: "Buscar", noMatch: "Aucun émoji ne correspond à votre recherche"}} />>| Prop | Type | Default | Description |
|---|---|---|---|
set | {String} | twitter | The emoji set: apple, google, twitter, emojione, messenger or facebook |
size | {Number} | 28 | The emoji width and height. Will get the closest sheet size automatically. |
perRow | {Number} | 9 | Number of emojis per row. This will affect the selector's width |
skin | {Number} | 1 | Default skin color: 1, 2, 3, 4, 5 or 6 |
native | {Boolean} | false | Renders the OS's native unicode emoji |
autoFocus | {Boolean} | false | Auto focus the search input when mounted |
phrases | {Object} | An object containing localized strings | |
lang | {String} | en | The selector's language. List of supported langs |
onClick | {Function} | Params: (emoji) => {} | |
imageFn | {Function} | A function that returns the image sheet to use for emojis. Useful for avoiding a request if you have a sheet locally. |
Emoji
import { Emoji } from 'emjr';
<Emoji emoji="joy" />
<Emoji emoji="red_car" set="google" size={64} />
<Emoji emoji="tomato" onClick={emoji => console.log("Yummy!")} />| Prop | Type | Default | Description |
|---|---|---|---|
emoji | {String} | Either a string or an emoji object | |
size | {Number} | 32 | The emoji width and height. Will get the closest sheet size automatically. |
set | {String} | twitter | The emoji set: apple, google, twitter, emojione, messenger or facebook |
skin | {Number} | 1 | Default skin color: 1, 2, 3, 4, 5 or 6 |
native | {Boolean} | false | Renders the OS's native unicode emoji |
imageFn | {Function} | A function that returns the image sheet to use for emojis. Useful for avoiding a request if you have a sheet locally. | |
onClick | {Function} | Params: (emoji) => {} |
📐 Sheet sizes
The emoji spritesheets come from the emoji-datasource project and they are served through unpkg, a global CDN that serves NPM package files. Here's a list of the most used set and sheet sizes combos, although there are a lot more.
| Set | Sheet size (px) | Size |
|---|---|---|
| apple | 16 | 938.7 kB |
| apple | 20 | 1.3 MB |
| apple | 32 | 2.6 MB |
| apple | 64 | 7.2 MB |
| emojione | 16 | 805.5 kB |
| emojione | 20 | 1.1 MB |
| emojione | 32 | 2.0 MB |
| emojione | 64 | 2.7 MB |
| 16 | 622.6 kB | |
| 20 | 849.8 kB | |
| 32 | 1.6 MB | |
| 64 | 3.6 MB | |
| 16 | 776.0 kB | |
| 20 | 1.0 MB | |
| 32 | 1.9 MB | |
| 64 | 4.2 MB |
🌍 Language and i18n
You can provide the lang prop with ISO 3166 supported country codes. The current supported langs are English (en) and Spanish (es). Please feel free to open a PR to add more languages.
You can also provide a phrases prop that follows the lang structure you can view in the langs.json file. Here's an example:
{
"search": "Search",
"noMatch": "No emoji matches your search"
}😀 Emoji object
Most events such as onClick() will return an emoji object. Here's an example of the stuck_out_tongue emoji 😛:
{
"name": "stuck_out_tongue",
"char": "😛",
"keywords": [
"face",
"prank",
"childish",
"playful",
"mischievous",
"smile",
"tongue"
]
}💯 Features
Awesome performance
We make use of shouldComponentUpdate() and functional components in a lot of places to lower the render times. Emjr will run perfectly on devices such as small laptops.
From XS to XL
Thanks to emoji-datasource you can choose to render your emojis from 16px up to 64px. We also take care of irregular sizes such as 28px by adding margin automatically.
Skin colors
You have control over which skin color is used by default, but it can be overwritten as per user preference.
Multiple sets supported
Apple, Google, Twitter, EmojiOne, Messenger and Facebook are supported.
Unopinionated
We make no assumptions on where you're going to use the Selector component, and as so, we provide a powerful onClick() function where you can insert the emoji code into a text input, insert it into a text...
It's up to you to mount/unmout and position the component. You can also use emoji.char to use the emoji.
🏓 TODOs
- !! End skin selector up
- ! More powerful search
- ! Custon scrollbar (by using
::-webkit-scrollbarCSS selector) - ! Easy to customize CSS
- !! Fix lag on search out
- Add search and exit icon on input
- !! Add tests
📖 License
Emjr is licensed under the MIT License.