Need help with react-emoji-render?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tommoor
278 Stars 46 Forks MIT License 144 Commits 13 Opened issues

Description

Normalize and render emoji's the way your users expect.

Services available

!
?

Need anything else?

Contributors list

# 2,077
JavaScr...
React
Markdow...
wiki
75 commits
# 64,180
React
diagram...
TypeScr...
HTML
22 commits
# 74,658
Markdow...
perl6
raku
debian
4 commits
# 298,821
TypeScr...
lit-htm...
lit-ele...
PHP
1 commit
# 117,159
showcas...
Qt
TypeScr...
C
1 commit
# 630,416
React
JavaScr...
react-c...
1 commit
# 574,158
React
JavaScr...
react-c...
1 commit
# 180,793
Shell
Go
Ruby
puppet
1 commit
# 423,414
React
react-c...
TypeScr...
HTML
1 commit
# 565,543
JavaScr...
HTML
React
react-c...
1 commit
# 574,469
React
CSS
reasonm...
react-c...
1 commit
# 258,516
cyclejs
Shell
HTML
React
1 commit
# 328,460
C++
Shell
React
react-c...
1 commit

npm version Node.js CI

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

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.

import Emoji from "react-emoji-render";

;

Twemoji

Twemoji is an emoji set designed by Twitter, you can use the included

Twemoji
component to render emoji images in this style.
import { Twemoji } from 'react-emoji-render';

// or, for svg images:

Emojione

Emojione is a great looking open source emoji set, you can use the included

Emojione
component to render emoji images in this style.
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:

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.

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:

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:

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:


Contributing

Emojis and aliases

If our dataset 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 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.