# emjr

> Customizable React-based emoji picker

Latest version **1.0.4** (published 2018-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install emjr
pnpm add emjr
yarn add emjr
bun add emjr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-07-23 |
| First published | 2017-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.3.0 < 5.0.0 \|\| >= 5.10 |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hugo Manrique |
| Maintainers | hugmanrique |

## Links

- npm: https://www.npmjs.com/package/emjr
- Repository: https://github.com/hugmanrique/Emjr
- Issues: https://github.com/hugmanrique/Emjr/issues
- npm.io page: https://npm.io/package/emjr

## Recent versions

- 1.0.4 (latest) — 2018-07-23
- 1.0.3 — 2017-08-02
- 1.0.2 — 2017-08-02
- 1.0.0 — 2017-08-02

## README

# 🐵 Emjr
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]

A customizable React-based emoji picker.

<div align="center">
  <img src="https://i.imgur.com/1qtD7K4.png">
</div>

## 📦 Installation

```
# With npm:
npm i --save emjr

# With yarn:
yarn emjr
```

## 🐦 Components

### Selector

```javascript
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](#-sheet-sizes) 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](#-language-and-i18n) containing localized strings                                                         |
| **`lang`**      | `{String}`   | `en`                                                                                           | The selector's language. [List of supported langs](#-language-and-i18n)                     |
| **`onClick`**   | `{Function}` |           | Params: [`(emoji) => {}`](#-emoji-object)                                          |
| **`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

```javascript
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](#-sheet-sizes) 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) => {}`](#-emoji-object)                                          |

### 📐 Sheet sizes
The emoji spritesheets come from the [emoji-datasource](https://www.npmjs.com/package/emoji-datasource) project and they are served through [unpkg](https://unpkg.com/), 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](https://www.npmjs.com/package/emoji-datasource#installation).

| 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](https://en.wikipedia.org/wiki/ISO_3166) supported country codes. The current supported langs are English (`en`) and Spanish (`es`). Please feel free to open a [PR](https://github.com/hugmanrique/Emjr/compare) to add more languages.

You can also provide a `phrases` prop that follows the lang structure you can view in the [langs.json](src/data/lang.json) file. Here's an example:

```json
{
  "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 😛:

```json
{
  "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](https://www.npmjs.com/package/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](https://i.imgur.com/kLsc94G.png)

#### 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](LICENSE).

[npm]: https://img.shields.io/npm/v/emjr.svg
[npm-url]: https://npmjs.com/package/emjr

[node]: https://img.shields.io/node/v/emjr.svg
[node-url]: https://nodejs.org

[deps]: https://david-dm.org/hugmanrique/emjr/dev-status.svg
[deps-url]: https://david-dm.org/hugmanrique/emjr

[tests]: http://img.shields.io/travis/hugmanrique/Emjr.svg
[tests-url]: https://travis-ci.org/hugmanrique/Emjr

[cover]: https://coveralls.io/repos/github/hugmanrique/Emjr
[cover-url]: https://coveralls.io/github/hugmanrique/Emjr

---
_Source: https://npm.io/package/emjr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._