unicodereasonbucklescriptreason-react

How to display emojis with ReasonReact?

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.

Solution

  • 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