# react-emoji-render
> Render emoji's the way your users expect.
Latest version **2.0.1** (published 2023-01-12) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-emoji-render
pnpm add react-emoji-render
yarn add react-emoji-render
bun add react-emoji-render
```
## 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 | 2.0.1 |
| Published | 2023-01-12 |
| First published | 2017-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 137 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 334 |
| Author | Tom Moor |
| Maintainers | tommoor |
| Keywords | react-component, emoji, twemoji, emojione |
## Links
- npm: https://www.npmjs.com/package/react-emoji-render
- Repository: https://github.com/tommoor/react-emoji-render
- Homepage: https://github.com/tommoor/react-emoji-render#readme
- Issues: https://github.com/tommoor/react-emoji-render/issues
- npm.io page: https://npm.io/package/react-emoji-render
## Dependencies (5)
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [emoji-regex](https://npm.io/package/emoji-regex.md) ^8.0.0
- [lodash.flatten](https://npm.io/package/lodash.flatten.md) ^4.4.0
- [string-replace-to-array](https://npm.io/package/string-replace-to-array.md) ^1.0.1
## Recent versions
- 2.0.1 (latest) — 2023-01-12
- 2.0.0 — 2023-01-12
- 1.2.4 — 2020-05-12
- 1.2.3 — 2020-05-10
- 1.2.2 — 2020-02-23
- 1.2.1 — 2019-12-28
- 1.2.0 — 2019-12-07
- 1.1.0 — 2019-11-08
- 1.0.0 — 2019-07-30
- 0.6.0 — 2019-03-02
- 0.5.0 — 2018-11-17
- 0.4.6 — 2018-09-25
- 0.4.5 — 2018-07-18
- 0.4.4 — 2017-12-23
- 0.4.3 — 2017-11-02
- … 11 more at https://npm.io/package/react-emoji-render/versions
## README
[](https://badge.fury.io/js/react-emoji-render) 
# react-emoji-render
Normalize and render emoji's the way your users expect.
- Supports unicode emoji characters
- Supports emoticons such as :) :x :/
- Supports slack-style emoji names such as `:smile:`
- Choose between native, twemoji, emojione or custom image sets.
- Add custom styles when text contains only emoji (to make it bigger, of course)
[Live Demo on CodeSandbox](https://codesandbox.io/s/exciting-ives-vwe5g)
## Installation
Install with your favorite package manager:
```
npm install react-emoji-render --save
```
```
yarn add react-emoji-render
```
## Basic Usage
By default the component will normalize all of the different emoji notations to
native unicode characters.
```javascript
import Emoji from "react-emoji-render";
;
// or as a child
This ❤️ sentence includes :+1: a variety of emoji types :)
;
```
### Twemoji
[Twemoji](https://github.com/twitter/twemoji) is an emoji set designed by Twitter,
you can use the included `Twemoji` component to render emoji images in this style.
```javascript
import { Twemoji } from 'react-emoji-render';
// or, for svg images:
```
### Emojione
[Emojione](https://github.com/Ranks/emojione) is a great looking open source emoji set,
you can use the included `Emojione` component to render emoji images in this style.
```javascript
import { Emojione } from 'react-emoji-render';
// or, for svg images:
// or, for Emojione v4
// note: only png supported -->
// https://github.com/emojione/emojione-assets/issues/2
// in v4 size prop can be set at 32, 64 (default) or 128
```
## Advanced Usage
### Only Emoji
The className passed as the `onlyEmojiClassName` prop is added when the provided
text contains only three or less emoji characters. This allows you to add custom
styles in this scenario. For example:
```javascript
```
### Array Output
If you want to do further processing on the output, for example parsing HTML then
it may be useful to not have the normalized emojis be wrapped in a component.
```javascript
import { toArray } from "react-emoji-render";
// content is an array of text and emoji components, you can now loop through this
// array and perform further processing. Avoid using `dangerouslySetInnerHTML`!
const content = toArray(
"This ❤️ sentence includes :+1: a variety of emoji types :)"
);
```
Then, for example, you can parse all the text and emojis in a single string like the following:
```javascript
const parseEmojis = value => {
const emojisArray = toArray(value);
// toArray outputs React elements for emojis and strings for other
const newValue = emojisArray.reduce((previous, current) => {
if (typeof current === "string") {
return previous + current;
}
return previous + current.props.children;
}, "");
return newValue;
};
parseEmojis(":)hello"); // => "😃hello"
```
### Custom Images
If you wish to use a custom emoji set / location then you can pass options into
the props. One way to achive this is to create a wrapping component which provides
your options and exposes a new component, something like:
```javascript
import Emoji from "react-emoji-render";
function MyEmojiRenderer({ children, ...rest }) {
const options = {
baseUrl: "https://mycustom.cdn.com/emojis/",
ext: "svg",
};
return ;
}
```
You can then use the new component:
```javascript
```
## Contributing
### Emojis and aliases
If our [dataset](data/aliases.js) is missing some emoji, please open an issue specifying which one is missing. The library has a package script (`yarn update-aliases`) that makes it easy to update with the latest emojis at any time. You can directly do it yourself and open a PR as well.
If you would like to add a new alias to an existing emoji, please find the emoji in our [custom aliases](data/aliases/customAliases.json) file and add the alias to its array of aliases. If you have found a source of aliases that is being actively maintained and you would like to add it, please open an issue to discuss it.
---
_Source: https://npm.io/package/react-emoji-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._