react-emojis

:rocket: :hamster: :tada: Render all current emojis with proper accessibility markup, on any size

Use react-emojis to output the recommended markup for accessible emojis:

<Emoji emoji="woman-dancing"/>

...outputs:

<span role="img" aria-label="woman dancing" class="react-emojis" style="line-height: 1;">💃</span>

The emojis :tada: :balloon: :unicorn:

Instead of maintaining a list of emojis on this README, I decided it would be best to create a living github page, that would serve both as a way of showcase the emojis, the Emoji component and facilitate their use:

https://dreamyguy.github.io/react-emojis/

On this page you can:

• Search for emojis
• Copy the emoji to the clipboard by clicking on your choice
• Choose what you'd like to copy to the clipboard:
  • emoji: The 'emoji' itself (this is the default option).
  • markup: Accessible emoji markup.
  • reactEmojis: Emoji component markup (based on "react-emojis" usage).
  • nameUrl: Emoji name (the reference used by "react-emojis").
  • name: Emoji name (CLDR formatting).
  • code: Emoji's Unicode.
  • id: The emoji's id, as set by unicode.org.

Line-height

The emoji will get line-height: 1 by default. You can override that behavior by:

• Setting a custom line-height to the class react-emojis, which the markup output provides out of the box.
• Passing a lineHeight prop to the component.

The latter can be done as follows:

<Emoji emoji="woman-dancing" lineHeight="inherit"/>

This will give the emoji the line-height from its parent.

One could also pass any valid value to it, as 1.2, 20px, etc. There's no validity check here so make sure you pass a valid value.

Scaling

The emoji will inherit the font size set by the parent element. You can override that behavior by:

• Setting a font-size to the class react-emojis, which the markup output provides out of the box.
• Passing a size prop to the component.

The latter can be done as follows:

<Emoji emoji="woman-dancing" size="100"/>

This will give the emoji 100px font-size.

I'll be working on passing units to the component, so one can scale the emoji in whichever way one prefers. For convenience, the default unit will remain px if no sizeUnit is passed as prop.

Origin

The emoji list is based on unicode.org's current list of named emojis under "browser" column (as of 2019-05-30).

Using react-emojis through npm

react-emojis is also available as a package on npm and can be installed as a depedency with:

npm i react-emojis --save

As with any node module, first you'll have to import it with require:

var Emoji = require('react-emojis');

...but in a modern React implementation you'll be using import:

import Emoji from 'react-emojis';

A note on size. With 1719 emoji definitions, this package is by no means small...

react-emojis only worked properly as a npm from version v1.0.4. If you're reading this it's no longer a problem. :tada:

Development

Getting started

Clone this repo locally. You'll need to have NodeJS installed. Install all dependencies by running:

npm i

Run it locally

To start the app locally, run:

npm run start

This command fires up the application on port 9900, making it visible on http://localhost:9900. Because this app is based on create-react-app, the port number should be configured on the .env file.

Building the frontend for Production

When you're ready to build for production, run:

 npm run build

This command compiles all production-optimised resources to a folder called build. It's meant to be run remotely, at the environment host, at build time.

License

MIT

About

react-emojis was put together by Wallace Sidhrée. 👨‍💻🇳🇴