Skip to content
⚛️ An accessible Emoji component for React applications
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add workflow Jun 11, 2019
src Rename props interface Sep 5, 2019
.gitignore Add lib to .gitignore Jan 14, 2019
LICENSE Add license Jan 5, 2019
README.md Update props interface Sep 5, 2019
jest.config.js Add tests Jan 5, 2019
package.json Patch bump Sep 5, 2019
tsconfig.json Change build target to ES6 Jun 11, 2019
yarn.lock Bump mixin-deep from 1.3.1 to 1.3.2 (#6) Sep 4, 2019

README.md

a11y-react-emoji

npm npm bundle size (minified) npm

⚛️ An accessible Emoji component for React applications

Why?

Emojis can add a light playfulness to your project but require some specific formatting in order to ensure they are accessible for all users. a11y-react-emoji's reusable Emoji component helps you do that quickly and painlessly.

How

The Emoji component wraps the provided symbol in a span with a role="img" attribute. If a label is provided, then it is passed as an aria-label to the span. If not, then aria-hidden is set to true.

<span aria-label="a rocket blasting off" role="img">🚀</span>
<span aria-hidden="true" role="img">🤫</span>

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

Installation

Add a11y-react-emoji to your project:

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

Use

Import Emoji, a default export, from a11y-react-emoji and add it to your code:

...
import Emoji from 'a11y-react-emoji'

function HeartFooter() {
    return (
        <footer>
            Made with
            {' '}
            <Emoji symbol="💕" label="love" />
            {' '}
            by Sean McPherson
        </footer>
    )
}

Emoji component

The Emoji component consumes two props: symbol and label. Every other prop is spread to the top-level JSX element, in this case a <span>.

interface Props extends React.HTMLAttributes<HTMLSpanElement> {
    label?: string; // optional
    symbol: string; // required
}

Considerations

If you are using a11y-react-emoji with a CSS-in-JS library like styled-components or emotion, keep in mind that all additional props are passed to the JSX element.

Styling an Emoji with styled-components

import styled, { css } from 'styled-components'
import Emoji from 'a11y-react-emoji'

const StyledEmoji = styled(({ isSpinning, ...props }) => <Emoji {...props} />)`
    font-size: 32px;

    ${props => props.isSpinning && css`
        animation: spinning 1s linear infinite;
    `}
`

License

MIT

You can’t perform that action at this time.