🐵 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
google	16	622.6 kB
google	20	849.8 kB
google	32	1.6 MB
google	64	3.6 MB
twitter	16	776.0 kB
twitter	20	1.0 MB
twitter	32	1.9 MB
twitter	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-scrollbar CSS 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.