🐵 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.