npm

Need private packages and team management tools?Check out npm Orgs. »

a11y-react-emoji

1.1.1 • Public • Published

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 EmojiProps {
    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

install

npm i a11y-react-emoji

Downloadsweekly downloads

497

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability