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

Basic Usage

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

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>
  );
}

Related

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

Contributors

Thanks goes to these people (emoji key):

| [

_{Duncan Bay}](https://github.com/DJTB)

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Duncan Bay