How to render emoji using Unicode in ReactJS?

Question

In ReactJS, there is unicode table for the emojis http://apps.timwhitlock.info/emoji/tables/unicode and tried following this https://css-tricks.com/emoji-toggles/ so made the attempt to render the rocket emoji (which has unicode: U+1F680 but converted to css content: \01F680) with:

<div style={{content: '\01F680'}}></div>

But I got an error. Is this the right way to do it?

EDIT

I want to create a round/circle button with the emoji centered to the middle of it.

CSS for the button:

#emoji-button {
  border-radius: 19px;
  width: 38px;
  height: 38px;
}

And round/circle button:

<button
  type="submit"
  id="emoji-button"
/>

And is there a way to create just the emoji image itself clickable?

EDIT

With CSS as you suggested:

#emoji-button {
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  text-align: center;
  background-color: white;
  border:0;
  position: absolute;
  right: -60px;
}

#emoji-button:before {
  content: "\01F426";
}

Answer 1

I am not sure if this is what you are looking for but i found this to be a good way to add Emoji in reactJS, especially so you don't have a ESLint fail message:

<span aria-label="a rocket blasting off" role="img"></span>

Wrap the emoji code in a span and give it a role='img' and a aria-label='description' so that it will help other developers too while they read your code. You could also add an id which you can then link to your css for styling purposes.

Answer 2

Octal literals were dropped from ECMAScript in strict mode since the 5th edition.

However, for other reasons, using '\U' before the unicode works. The problem with your case however, isn't react, or unicode. It seems unicode emojis work best when inserted as pseudo elements.

Unfortunately, you can't create inline css :before or :after pseudo elements. Your best bet would be to link an external css file, then target the div or class and define the content rules.

div:after {
  content: '\01F680';
}

Again, unicode emojis work with pseudo elements (:before or :after).

EDIT: Here's a jsfiddle that shows this idea in action.

Answer 3

The content property can only be used with :before and :after pseudo-elements and these are not available via inline CSS. Additionally, unicode characters in JavaScript strict mode must be double escaped otherwise an error is thrown because \01F680 parsed as an invalid escape sequence. To escape the \ double up \\01F680.

Made a module that lets you write plaintext CSS in React components called Style It, will use it to demonstrate below with the HTML/CSS from CSS-Tricks.

npm install style-it --save

Emoji Toggle (OPEN IN JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .emoji-toggle {
        position: relative;
        width: 60px;
        margin: 40px auto;
      }
      .emoji-toggle .well {
        display: block;
        background: #eee;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
      }
      .emoji-toggle .toggle {
        opacity: 0;
        border: 0;
        outline: none;
        height: 100%;
        width: 100%;
        background: transparent;
        position: absolute;
        cursor: pointer;
        z-index: 100;
      }
      .emoji-toggle .toggle ~ .emoji:before {
        content: "\\01F431";
        position: absolute;
        left: 0;
        top: -15px;
        font-size: 40px;
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      .emoji-toggle .toggle:checked ~ .emoji:before {
        left: 100%;
        margin-left: -1em;
      }
      .emoji-toggle .toggle ~ label {
        white-space: nowrap;
      }
      .emoji-toggle .toggle ~ label:before {
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      .emoji-toggle .toggle ~ label:after {
        position: absolute;
        left: 100%;
        margin-left: 5px;
        top: 0;
      }
      .emoji-travel .toggle ~ .emoji:before {
        content: "✈";
      }
      .emoji-travel .toggle:checked ~ .emoji:before {
        content: "";
      }
      .emoji-travel .toggle ~ label:before {
        content: "Plane";
      }
      .emoji-travel .toggle ~ label:after {
        content: "Train";
      }
    `,
      <div className="emoji-toggle emoji-travel">
        <input type="checkbox" id="toggle2" className="toggle" />
        <div className="emoji" />
        <label htmlFor="toggle2" className="well" />
      </div>
    );
  }
}

ReactDOM.render(
  <Intro />,
  document.getElementById('container')
);

Clickable Button Emoji (OPEN IN JSFIDDLE)

Change font-size to grow or shrink the emoji. width, height, and border-radius should be double what font-size is set to -- so if font-size: 10px; then width: 20px; height 20px; border-radius: 20px;.

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .emoji {
        font-size: 20px;
        height: 40px;
        width: 40px;
        border-radius: 40px;
        text-align: center;
      }
      .emoji:active:before {
        opacity: .7;
      }
      .emoji:before {
        content: "\\01F431";
      }
    `,
      <button className="emoji" />
    );
  }
}

ReactDOM.render(
  <Intro />,
  document.getElementById('container')
);

Edit: Updated and simplified per edit