[![npm version](https://badge.fury.io/js/react-emoji-render.svg)](https://badge.fury.io/js/react-emoji-render) ![Tests](https://github.com/tommoor/react-emoji-render/actions/workflows/test.yml/badge.svg) # 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.

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

react-emoji-render	21,764	334	140 kB	14	2年前	MIT