Naoto-Ida / react-furi

React Furigana Component

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="かんがえかた" />;

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 💻 📖 🚇 🎨

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

License

MIT © Duncan Bay