rubycoloredglasses


I'm Jason, a web applications developer in the Denver, Colorado area.


How to Insert Special Entities in React

Generating Characters

You can generate UTF-16 characters in ES6 using String.fromCharCode(), which takes one or more UTF-16 codes as input and returns the unicode character(s) specified.

// hex code input
let copyright = String.fromCodePoint(0x00A9);
// "©"

// decimal code input
let copyright = String.fromCodePoint(0169);
// "©"

Here is a list of the codes for common characters I’ve seen used in websites:

Label Character Decimal Hex HTML
Copyright © 169 0x000A9 ©
Registered ® 174 0x000AE ®
Trademark 8482 0x02122 ™
Euro 8364 0x020AC €
Dollar $ 36 0x00024 $
Ohm 8486 0x02126 Ω
Degree ° 176 0x000B0 °
Micro µ 181 0x000B5 µ
Em Dash 8212 0x201 —
Non Breaking Space   160 0x000A0  

If you need a symbol not listed above, see the HTML5 Character Reference, or the List of Unicode Characters.

Using with React Components

After generating the character as a constant, just insert it into your JSX as needed.

import React from 'react';

const copyrightMessage = () => {

  const copyright = String.fromCodePoint(0x00A9);
  const year = '2020';
  const companyName = 'Company Name';

  return (
    <span>
     {`${copyright} ${year} ${companyName}`}
    </span>
  );
};

export default copyrightFooter;

See also JSX Gotchas for more approaches.

comments powered by Disqus