Socket
Socket
Sign inDemoInstall

react-emojis

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-emojis

Render scalable emojis with proper accessibility markup


Version published
Maintainers
1
Created

Readme

Source

Moments

react-emojis

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

MIT Licence

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. 👨‍💻🇳🇴

Keywords

FAQs

Package last updated on 15 Jun 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc