JSPM – a11y-react-emoji@1.2.0

Package Exports

a11y-react-emoji
a11y-react-emoji/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (a11y-react-emoji) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

⚛️ 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>
    )
}

The named EmojiProps type interface is also available for import if needed:

import Emoji, { EmojiProps } from 'a11y-react-emoji'

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

a11y-react-emoji