πŸ˜„ Customizable React-based emoji picker
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
src
.babelrc
.gitignore
.npmignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

🐡 Emjr

npm node deps tests coverage

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.

Emoji sets

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.