Package Exports

react-furi

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-furi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Examples

djtb.github.io/react-furi

Installation

Note: react, react-dom, & styled-components are expected to already be present in your app

npm install --save react-furi

Props

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

Usage

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

Example Reading Render

Or you can custom render + re-use/restyle ReactFuri's styled-components

const MyWrapper = ReactFuri.Wrapper.withComponent('h1');
const MyFuriText = styled(ReactFuri.Furi)`
  color: papayawhip;
`;

const MyComponent = () => (
  <ReactFuri
    word="考え方"
    reading="かんがえかた"
    render={({ pairs }) => (
      <MyWrapper lang="ja">
        {pairs.map(([furigana, text], index) => (
          <ReactFuri.Pair key={index}>
            <MyFuriText>{furigana}</MyFuriText>
            <ReactFuri.Text>{text}</ReactFuri.Text>
          </ReactFuri.Pair>
        ))}
      </MyWrapper>
    )}
  />
);

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

Roadmap

Publish combineFuri util without any React dependencies so it can be used agnostically
Remove styled-components as peer dependency (use inline styles, optional css bundle w/ classnames?)

Contributors

Thanks goes to these people (emoji key):

_{Duncan Bay} 💻 📖 🚇 🎨

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

react-furi