How to display emojis with ReasonReact?

Question

Is there an easy way to insert emojis with ReasonReact?

In ReactJS, you can simply type the emoji and it renders as expected, but that doesn't seem to be the case in Reason.

If you try this:

<span role="img" ariaHidden=true> {React.string("")} </span>

It compiles to:

React.createElement("span", {
                  "aria-hidden": true,
                  role: "img"
                }, "\xf0\x9f\x92\xa9")

Which renders as:

ð©

What would be the best way to encode emojis so ReasonReact can display them as expected?

The answers to this question explain how to insert unicode, but I'm interested in how to directly type the characters without looking up the unicode for each one.

Possible duplicate of [How to add a copyright symbol in reason-react component?](https://stackoverflow.com/questions/49039433/how-to-add-a-copyright-symbol-in-reason-react-component) — glennsl, Jul 05 '19 at 21:00
@glennsl That is pretty similar, although I would rather not have to look up the unicode for each emoji. The answer here lets you type the characters directly, which is what I needed. The same answer applies to the copyright-symbol question too, though. — , Jul 05 '19 at 21:28
Emojis _are_ unicode. It's the same thing, just a different notation. It would be a good idea to update the old answer to also show the possibility of using unicode characters directly though. — glennsl, Jul 05 '19 at 21:36

score 5 · Accepted Answer · edited Nov 11 '19 at 00:38

5

There is a special syntax provided by BuckleScript for unicode strings. Instead of quotes you need to use {j| |j}.

Try this instead

<span role="img" ariaHidden=true> {React.string({j||j})} </span>

This is because of how OCaml handles strings

edited Nov 11 '19 at 00:38

John Franke

1,444
19
23

answered Jul 05 '19 at 20:49

fakenickels

171
6

How to display emojis with ReasonReact?

1 Answers1