# a11y-react-emoji

> An accessible Emoji component for React applications

Latest version **1.2.0** (published 2022-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install a11y-react-emoji
pnpm add a11y-react-emoji
yarn add a11y-react-emoji
bun add a11y-react-emoji
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-01-28 |
| First published | 2019-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 72 |
| Author | Sean McPherson |
| Maintainers | seanmcp |
| Keywords | react, emoji, a11y, accessibility, accessible |

## Links

- npm: https://www.npmjs.com/package/a11y-react-emoji
- Repository: https://github.com/seanmcp/a11y-react-emoji
- Homepage: https://github.com/seanmcp/a11y-react-emoji#readme
- Issues: https://github.com/seanmcp/a11y-react-emoji/issues
- npm.io page: https://npm.io/package/a11y-react-emoji

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2022-01-28
- 1.1.3 — 2021-03-15
- 1.1.2 — 2020-01-17
- 1.1.1 — 2019-09-05
- 1.1.0-beta.1 — 2019-09-05
- 1.1.0-beta — 2019-09-05
- 1.1.0 — 2019-09-05
- 1.0.2 — 2019-06-11
- 1.0.1 — 2019-05-18
- 1.0.0 — 2019-01-18
- 0.0.1--prerelease.7 — 2019-01-14
- 0.0.1--beta.0 — 2019-01-12
- 0.0.1--prerelease.6 — 2019-01-12
- 0.0.1--prerelease.5 — 2019-01-12
- 0.0.1--prerelease.4 — 2019-01-12
- … 5 more at https://npm.io/package/a11y-react-emoji/versions

## README

# a11y-react-emoji

[![npm](https://img.shields.io/npm/v/a11y-react-emoji.svg)](https://npmjs.com/package/a11y-react-emoji) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/a11y-react-emoji.svg)](https://npmjs.com/package/a11y-react-emoji) [![npm](https://img.shields.io/npm/dt/a11y-react-emoji.svg)](https://npmjs.com/package/a11y-react-emoji)

⚛️ 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`.

```html
<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](http://tink.uk/accessible-emoji/) and used by [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md).

## Installation
Add `a11y-react-emoji` to your project:

```sh
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:

```jsx
...
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:

```ts
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>`.

```ts
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`

```jsx
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](/LICENSE)

---
_Source: https://npm.io/package/a11y-react-emoji · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._