React Furi

Good Lookin' Furigana

REPO is currently UNSTABLE

Component extracted from a production site. Currently missing:

• NPM publish
• Remove styled-components dependency

Demo

djtb.github.io/react-furi

Why?

The Ruby element often has less than ideal rendering. This React component allows you to use furigana data from JmdictFurigana to render only the necessary readings over their respective characters. Also allows better styling control of your furigana, props to easily show/hide furigana, and fallbacks to render similarly to Ruby tags while automatically removing redundant kana.

Installation

npm install --save react-furi

Usage

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

Props

Prop	Type	Description
word	string	A Japanese word
reading	string	The reading of the Japanese word
furi	string or object	Furigana -> associated kanji placement data
showFuri	boolean	Whether or not to show furigana
render	function	Custom render function, receives a single prop pairs which is an array of grouped [furi, text] pairs.

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