0

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

enter image description here

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"; }
Improve this question

3 Answers 3

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

4 Comments

@Center I tried it but still doesn't work. Could you show a working example? So I can accept the answer and upvote it.
Thank you it works beautifully! But a few last questions, how can I increase the size? Also how can I make it clickable so that it triggers a method (itd be really helpful like if you can show it on jfiddle again where when clicked would just console.log a string)? Lastly, what do :before and :after mean?
@JohnBana It is a unicode character so you would change the size like you would any other character, by adjusting the font-size. Make sure you do it in the before and after too. stackoverflow.com/questions/23750346/… Great picture (not to mention article to help understand pseudo elements) found here css-tricks.com/pseudo-element-roundup
:before and :after insert something before or after a targeted elements. That's why they are pseudo elements, they aren't really there, except they are. In addition to Joshua's comment, you could also look here: w3schools.com/cssref/sel_before.asp
0

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

Improve this answer

11 Comments

how can I make an emoji clickable button?
@JohnBana See edit. Went ahead and converted the example because if pseudos/css/html are not fully groked yet then would expect the first one would be hard to pick apart. That said, do give that Chris Coyier article a read.. button conversion is more of a getting started with HTML question, recommend MDN as an awesome starter resource (use it all the time myself) developer.mozilla.org/en-US/docs/Learn
Close to what I wanted to achieve! Before I accept the answer and upvote, please take a look at the original post with EDIT update as to where I want to get to. Also, in that case, how can I control the emoji size yet still have it still be centered inside the button despite the button size? Thanks again Joshua
@JohnBana Updated and simplified
If I change either the size of the button or the font-size, the emoji does not stay to the center of the button though. For example, just change font-size to 30 would make the emoji be placed outside the button. Also to clarify, .emoji:active: clicking the button turns it into opacity of .7, correct?
|