👍 ⚛️ — Introducing a11y-react-emoji

Photo by rawpixel on Unsplash

Last April, I wrote an article titled “👋 ⚛️ — How to use emojis in React.” I felt silly for writing it and didn’t think twice when the article sat unnoticed for a few weeks. Then, thanks to Google’s indexing, the article starting appearing on searches for “React” and “emoji”, resulting in a steady stream of traffic.

Nine months later, it has over 200 claps and is (by far) my most popular article on Medium.

I’m glad that so many people have found the article useful, but I have always felt badly about how it ended. I shared a component for using accessible emojis in React but left the reader with no way to implement it without copying and pasting. That’s not a great conclusion in my book.

Well, I am happy to report that the problem finally has a sharable solution. I turned the component from my original article into a React component library called a11y-react-emoji!

Hello accessible React emojis!

a11y-react-emoji has one goal: provide an easy and accessible solution for using emojis in React applications. It achieves this by offering a reusable Emoji component with a simple API that outputs accessible markup.

It works like this:

// This JSX
<Emoji symbol="🚀" label="a rocket blasting off" />
// yields this HTML
<span aria-label="a rocket blasting off" role="img">🚀</span>

This follows the pattern recommended by Léonie Watson and used by eslint-plugin-jsx-a11y.

In instances where you are using an emoji for purely decorative purposes, you can forego the label prop and just use the following:

// For decorative emojis, leave out a label
<Emoji symbol="🤫" />
// and Emoji sets an aria attribute to hide it from screen readers
<span aria-hidden="true" role="img">🤫</span>

That’s it! By keeping the API simple, I’m hoping that applications will be more willing to use this accessible emoji solution.

For more information, check out the official documentation.

Give it a try!

To add a11y-react-emoji, simply use your favorite package manager:

npm install --save a11y-react-emoji
# or
yarn add a11y-react-emoji

Import the Emoji component, and get going:

import Emoji from 'a11y-react-emoji'
function HeartFooter() {
    return (
        <footer>
            Made with
            {' '}
            <Emoji symbol="❤️" label="love" />
            {' '}
            by Sean McPherson
        </footer>
    )
}

Feedback

If you run into any bugs, please file an issue on GitHub. Leave any other questions or comments here.

Happy coding!