React-furi NPM

React Furi

Good Lookin' Furigana

Why?

The Ruby element often has less than ideal rendering. This React component will automatically strip redundant kana, eliminating unnecessary noise often present in texts with furigana. Alternatively, you can use furigana data from JmdictFurigana to render compound readings precisely over their respective kanji characters.

Demo

djtb.github.io/react-furi

Installation

npm install --save react-furi

Props

Prop	Type	Description
`word`	string	Japanese word
`reading`	string (optional)	Full reading of the Japanese word
`furi`	string or object (optional)	Furigana -> associated kanji location data
`showFuri`	boolean (optional)	Whether or not to show furigana (does not apply if using custom render)
`render`	function (optional)	Custom render function, receives a single prop `pairs` which is an array of grouped `[furigana, text]` pairs.

Basic Usage

import { ReactFuri } from 'react-furi';
const MyComponent = () => <ReactFuri word="考え方" reading="かんがえかた" />;

Example Reading Render

Or you can customize your rendering using the exported hook and compound components

import { useFuriPairs, Wrapper, Pair, Text, Furi } from 'react-furi';

function MyComponent({ word, reading, furi, showFuri }) {
  // Memoized generation of text and accompanying furigana pairs
  const pairs = useFuriPairs(word, reading, furi);

  return (
    <Wrapper>
      {pairs.map(([furiText, text], index) => (
        <Pair key={text + index}>
          {showFuri && <Furi>{furiText}</Furi>}
          <Text>{text}</Text>
        </Pair>
      ))}
    </Wrapper>
  );
}

JmdictFurigana : Furigana dictionary
Wanakana : Japanese romaji <-> kana transliteration
Hatsuon : Japanese pitch accent tools