https://github.com/seanmcp/a11y-react-emoji
⚛️ An accessible Emoji component for React applications
https://github.com/seanmcp/a11y-react-emoji
a11y accessible component emoji emoji-component react
Last synced: 11 months ago
JSON representation
⚛️ An accessible Emoji component for React applications
- Host: GitHub
- URL: https://github.com/seanmcp/a11y-react-emoji
- Owner: SeanMcP
- License: mit
- Created: 2019-01-05T15:13:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:29:43.000Z (over 3 years ago)
- Last Synced: 2024-12-09T18:11:51.268Z (over 1 year ago)
- Topics: a11y, accessible, component, emoji, emoji-component, react
- Language: TypeScript
- Homepage: https://npmjs.com/package/a11y-react-emoji
- Size: 774 KB
- Stars: 72
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# a11y-react-emoji
[](https://npmjs.com/package/a11y-react-emoji) [](https://npmjs.com/package/a11y-react-emoji) [](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
🚀
🤫
```
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 (
Made with
{' '}
{' '}
by Sean McPherson
)
}
```
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 ``.
```ts
interface Props extends React.HTMLAttributes {
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 }) => )`
font-size: 32px;
${props => props.isSpinning && css`
animation: spinning 1s linear infinite;
`}
`
```
## License
[MIT](/LICENSE)