How to display Emoji in React App

I would like to display emojis on my webpage in a react chat app. The plan is to give the user a list of emojis to select from. How do I use the codes like '1F683' and have them display the emoji on the page? I need to support Chrome.

I am able to use css to show the emoji.

<div className="smiley"></div>

.smiley:after {
    content: "\01F683";
}

I can also have a list of images and map them to the code and display an img element per emoji.

Is there another way and which is the best way to do this?

Solution 1:

I am maybe late to the party but I needed to conditionally render different emojis by the same component, so for me the easiest way was:

Go to https://unicode.org/emoji/charts/full-emoji-list.html
Find needed emojis, for example U+1F609 and use it as a string of a hex number 0x1F609 with String.fromCodePoint in your code — see below.
Create one little component to satisfy eslint rule which would otherwise throw an error Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji:

const Emoji = React.memo(({ className, label, symbol }) =>
    <span className={className} role="img" aria-label={label}>
        {String.fromCodePoint(symbol)}
    </span>)

export default Emoji

So then somewhere else you can use it as:

class MagnificentComponent extends PureComponent {
    getEmojiConditionally = () => this.props.happy ? '0x1F60A' : '0x1F61E'

    render = () =>
        <SomeComponentWhereINeedEmoji>
            <Emoji symbol={this.getEmojiConditionally(} />
        </SomeComponentWhereINeedEmoji>
}

Solution 2:

All emojis are pretty much standardized with the format at Emoji Cheat Sheet, so your given example above (\01F683) maps to railway_car in the Emoji Cheat Sheet.

It might be a better idea to store your emojis with these identifiers and map it to the actual emojis later on, without worrying about encoding the actual emoji (🚃) themselves, or not being able to tell/remember the actual emoji represented by the Unicode sequence (\01F683).

If you wish to map this human-readable identifier to the actual Unicode sequence/symbol itself, you have a few options, using railway_car as an example:

Twemoji Awesome

Twemoji Awesome is like Font Awesome, but with Twitter Emojis.

You can then insert an emoji like this, just like Font Awesome.

<i class="twa twa-railway-car"></i>

This will output the corresponding SVG:

Emoji Dictionary

There's an npm package aptly named emoji-dictionary that allows you to map the emoji name to the Unicode character, if you wish to use default the browser's default emoji renderer.

The usage will then look like this:

emoji.getUnicode("railway_car");

This returns 🚃 (which would display on modern browsers/might break on older browsers/etc).

Solution 3:

We have the unicode of emojis in W3C . It is in the range of {. Hex 2600-26FF.}.

Thus, you can generate it without CSS.

Check example below 👇🏼

class Emoji extends React.Component  {

  render() {
    const {title, code} = this.props;
    return <span className="emoji" title={title}>{code}</span> 
  }
}

class App extends React.Component {

renderEmojis() {
  const rangeEmojis = Array.from({length: 256}, (v, k) => (k + 9728).toString(16));
  
  return rangeEmojis.map((code, index) => <Emoji code={unescape ('%u' + code)} title={"My code is :"+code} key={'emj'+index} />) 

} 

render() {

  return (
  
    <div>
      {this.renderEmojis()}
 
    </div>
  )
}

}

ReactDOM.render(<App />, document.querySelector('#chat'))

.emoji {
  border: solid 1px #3e3e3e;
  width: 50px;
  height: 50px;
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section id="chat" />

Solution 4:

They are many ways to use emoji's in react. With NPM and also without it by a "span" tag.

<span role="img" aria-label="arrow">➡️</span>

I find this simple and easy to use.