How to display Emoji in React App

Question

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?

Nix

Your code works fine on my machine (OS X, Chrome 56), although it should be ::after (two colons). If your CSS is served with the correct encoding specified in the Content-Type header or @charset declaration, you can also just use the emoji directly (.smiley::after { content: '🚋'; }). Related: #10393962 – Dunt

🎉 Great 💻. Don't forget to press Ctrl+Cmd + Space – Dayflower

@Nix How about trying a direct emoji picker for your ReactApp like github.com/Dipen-Dedania/mr-emoji ? – Jobey

Answer 1

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).

Logbook

I did look at the Twemoji Awesome project but its no longer being maintained. Emoji dictionary might just do the job. Will take a look. Thanks! – Nix

Answer 2

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:

1. Go to https://unicode.org/emoji/charts/full-emoji-list.html
2. 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.
3. 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>
}

Kick

Answer 3

---

React code for Grinning face with big eyes:

<div>
  {String.fromCodePoint('0x1f603')}
</div>

---

Output:

😃

---

Full Emoji List, v15.0 - https://unicode.org/emoji/charts/full-emoji-list.html

--

Lawrenson

Answer 4

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" />

Dayflower

This is great. But its missing quite a few common emojis we need. Thumbs up & down, various smiley faces etc. Also doesnt have the colourful ones. I do appreciate the full react solution though. – Nix

Answer 5

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.

Adolphus

Answer 6

With Typescript TS or with strict mode.

you can't pass string argument to String.fromCodePoint,

hence argument must be hexa type number, so try as following -

String.fromCodePoint(parseInt('0x1f603', 16))

Output: 😃

Sharenshargel

Answer 7

Putting this here just incase anyone else stumbles on this post looking for what I needed.

<p>
After a lot of Googling and reading I just copy/pasted the emoji, it seems to work fine 🤷‍♂️. 
</p>

To get the emoji I went to Discord sent the emoji I needed and copy/pasted it into my code and it shows up on screen.

Espino