👋 ⚛️ — How to use emojis in React

Hey there! I released an NPM package called a11y-react-emoji with the Emoji component discussed in this article. You can check it out here, and read the follow-up article here. 👍 — Sean

Emojis are very in, these days. Cool developers on Twitter will feature them in their display name, projects will display them in their documentation, and GitHub repositories will begin their description with an emoji. They’ve even made it into the terminal, where utilities like create-react-app use them to illustrate the installation process.

If you can’t beat them, you might as well join them! But if you’ve ever tried adding emojis to your React project, you may have found that joining them isn’t as straightforward as it seems. Never fear: I have a simple way to use emojis in your next project that is both reusable and accessible.

What’s an emoji?

Emojis are little digital icons or images used to express an idea or an emotion. If you’ve been living under a rock for the last five years, think of them as the emoticons of the 2010s ;-). Emojis are actually part of Unicode and are available on most devices. However, the symbols themselves will render very differently depending on the device. For example, take a look at the humble “grinning face”:

They are generally the same, but there are some major stylistic differences. Because they display differently for different users, it is recommended that you only use emoji’s for non-essential or decorative purposes. Just a bit of flair to spice up your page, 👌? (Note: That was an intentionally bad use of an emoji.)

Finding emojis on the computer

Once you’ve settled an appropriate use case, now it’s time to find your emoji. On your phone, they’re probably build straight into your keyboard. Online, however, you’re going to need to use an online resource or browser extension. I recommend the Unicode.org and Emojipedia.org. The former has a handy “copy” feature that removes the need to click and drag.

Two bad ways to use emojis in React

1. Copy and paste

Now that you have your emoji copied, you might be tempted to past it straight into the JSX of your React component. If you did, you would see the emoji rendered on the screen and wonder why I took the time to write an article for something so simple.

That is… until you look in the terminal and see that pasting an emoji straight into your component throws an ESLint error. Not good. We’ll get to their recommended solution in a bit, but for now remember: you shouldn’t use paste emojis inline with other text.

2. Unicode escape

As with other unicode characters, emojis can be represented by a series of characters and digits. These can be represented in React by wrapping an escaped string with braces, e.g. {'\u2728'}. This will work for some emojis, like ✨, but the system is not consistent for every emoji. This is not recommended either.

One good solution for using emojis in React

When you tried to copy and paste your emoji into your component, it throws a console error that makes a suggestion: wrap it in a span and add some properties to it. The recommended format looks like this:

<span role="img" aria-label="sheep">🐑</span>

The additional properties allow screen readers to understand that the symbol is an image that can be labelled by the word “sheep.” This makes your emoji more accessible for everyone, which should be the goal of every good developer.

This is a great solution to our emoji problem, but I’m going to recommend a better one. If you are going to use many emojis in your project, you won’t want to write that span for every one. Besides, this is React! Reusability is the name of the game. So how can we use the principles of React to create a flexible component?

A better solution for using emojis in React

We’re going to create a functional emoji component that will promote good practices, accessibility, and reusability. Check it out:

import React from 'react';const Emoji = props => (
    <span
        className="emoji"
        role="img"
        aria-label={props.label ? props.label : ""}
        aria-hidden={props.label ? "false" : "true"}
    >
        {props.symbol}
    </span>);export default Emoji;

Our Emoji component takes two props: label, and symbol. If present, the label is used to generate an aria-label, which will be read by a user’s screen reader. If absent, aria-label is left blank and aria-hidden is set to true. This means it will be ignored by the screen reader. This is a good practice if the emoji doesn’t add anything to the website other than a bit of flair.

The symbol, which will be a string containing the emoji, is passed into the returned span. The role is the same in the previous example, and I added a class for styling.

After importing our Emoji component, we can use it like so:

<Emoji symbol="🐑" label="sheep"/>
// or
<Emoji symbol="🐑"/>

There we go! While you may only save a few characters typed compared to the previous example, the new solution is more semantic, promotes accessibility, and is easily reusable. You can sprinkle these Emoji components anywhere, and bring some fun to your React projects.

Note: This exact component is available in my a11y-react-emoji component library. Check it out on NPM.

Code examples

To see the Emoji component in action, check out the working example on CodeSandbox:

I recently used this Emoji component in a small project called Dice Roller (checkout the create and settings menus). You can see the code on the GitHub repo.

Let me know what you think, and please share how you’re using emojis in your next React project. Happy coding!