Repository files navigation

🚀 🐹 🎉 Render all current emojis with proper accessibility markup, on any size

Usereact-emojis to output the recommended markup for accessible emojis:

<Emojiemoji="woman-dancing"/>

...outputs:

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

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

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

On this page you can:

• Search foremojis
• Copy theemoji 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.

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

• Setting a customline-height to the classreact-emojis, which the markup output provides out of the box.
• Passing alineHeightprop to the component.

The latter can be done as follows:

<Emojiemoji="woman-dancing"lineHeight="inherit"/>

This will give the emoji theline-heightfrom its parent.

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

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

• Setting afont-size to the classreact-emojis, which the markup output provides out of the box.
• Passing asizeprop to the component.

The latter can be done as follows:

<Emojiemoji="woman-dancing"size="100"/>

This will give the emoji100pxfont-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 remainpx if nosizeUnit is passed asprop.

Theemoji list is based onunicode.org's current list of named emojis under "browser" column (as of 2019-05-30).

react-emojis is alsoavailable as a package onnpm 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 withrequire:

varEmoji=require('react-emojis');

...but in a modernReact implementation you'll be usingimport:

importEmojifrom'react-emojis';

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

react-emojis only worked properly as anpm from versionv1.0.4. If you're reading this it's no longer a problem. 🎉

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

npm i

To start the app locally, run:

npm run start

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

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

 npm run build

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

MIT

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