Japanese Furigana with React

This is a note titled "2019-04-30-create-japanese-furigana-ruby-html" taken from my note Library. Return to Library.

The HTML standard has this great tag called <ruby> for displaying the pronounciation of East Asian characters. This makes it super easy to add Furigana to Japanese Kanji using Javascript, HTML and React.

const furiganaRe = /[\u4e00-\u9faf]*{.*?}/gm
const furiganaToHTML = string =>
  string.replace(furiganaRe, x => {
    let [base, furigana] = x.slice(0, -1).split("{")
    return `<ruby>${base}<rt>${furigana}</rt></ruby>`
  });

export const Furigana = ({ children, ...rest }) => (
  <>
    {React.Children.map(children, node =>
      typeof node === "string" ? (
        <span dangerouslySetInnerHTML={{
            __html: furiganaToHTML(node)
        }} />
      ) : (
        node
      )
    )}
  </>
)

/* USAGE:
 * <Furigana>
 *  人間{にんげん}を食{た}べる
 * </Furigana>
 */