In ReactJS, there is unicode table for the emojis and tried following this / 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";
}

In ReactJS, there is unicode table for the emojis http://apps.timwhitlock.info/emoji/tables/unicode and tried following this https://css-tricks./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";
}

• javascript
• html
• css
• reactjs
• unicode

3 Answers 3

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: