Skip to content

DJTB/react-furi

Repository files navigation

React Furi

Good Lookin' Furigana

npm npm Codecov branch
Commitizen friendly Code of Conduct

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

Related

Contributors

Thanks goes to these people (emoji key):


Duncan Bay

💻 📖 🚇 🎨 🐛 🤔 🚧 👀 🛡️ ⚠️

Chun

🐛 💻 ⚠️

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

License

MIT © Duncan Bay