a11y-react-emoji
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • 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 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

    Install

    npm i a11y-react-emoji

    DownloadsWeekly Downloads

    3,082

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    8.11 kB

    Total Files

    10

    Last publish

    Collaborators

    • seanmcp