ReactFuri Examples

Default browser <ruby> element for comparison

<ruby>
  <rb>大人しい</rb>
  <rt>おとなしい</rt>
</ruby>

Intelligent furigana placement via reading

<ReactFuri word="大人しい" reading="おとなしい" />

<ReactFuri word="お陰" reading="おかげ" />

<ReactFuri word="使い方" reading="つかいかた" />

<ReactFuri word="申し申し" reading="もしもし" />

<ReactFuri word="お見舞い" reading="おみまい" />

Avoids rendering redundant furigana

<ReactFuri word="アイスクリーム" reading="アイスクリーム" />

<ReactFuri word="すいか" reading="スイカ" />

Precise furi placement (using JmdictFurigana data)

<ReactFuri word="お見舞い" furi="1:み;2:ま" />

<ReactFuri word="送り仮名" furi={{ 0:"おく", 2:"が", 3:"な" }} />

Toggling reading via `showFuri` prop

<Toggle render={({ on, toggle }) => (
  <ReactFuri word="漢字" furi="0:かん;1:じ" showFuri={on} onClick={toggle} />
)} />

Control rendering via render prop

<ReactFuri
  word="割り箸"
  reading="わりばし"
  render={({ pairs }) => <pre>{JSON.stringify(pairs)}</pre>}
/>

[["わ","割"],["","り"],["ばし","箸"]]

Control rendering completely via compound components and provided hook

import { useFuriPairs, Wrapper, Pair, Text, Furi } from 'react-furi'

function MyComponent({ word, reading, furi, showFuri }) {
  const pairs = useFuriPairs(word, reading, furi);

  return (
    <Wrapper
      style={{
        border: "1px solid black",
        borderRadius: "4px",
        padding: ".5rem",
      }}
    >
      {pairs.map(([furiText, text], index) => (
        <Pair key={text + index}>
          {showFuri && <Furi style={{color: 'coral'}}>{furiText}</Furi>}
          <Text style={{color: 'blue'}}>{text}</Text>
        </Pair>
      ))}
    </Wrapper>
  );
}
// render
// <MyComponent word="割り箸" reading="わりばし" />

Example Japanese sentence with ReactFuri

<p style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end" }}>
  {[
    ["５"],
    ["月", "がつ"],
    ["１日", "ついたち"],
    ["の"],
    ["メーデー"],
    ["に、"],
    ["パリ"],
    ["では"],
    ["毎年", "まいとし"],
    ["働く", "はたらく"],
    ["人たち", "ひとたち"],
    ["が"],
    ["デモ"],
    ["を"],
    ["行なって", "おこなって"],
    ["います"],
  ].map(([word, reading], index) => (
    <ReactFuri key={word+index} word={word} reading={reading} />
  ))}
</p>

５がつ月ついたち１日のメーデーに、パリではまいとし毎年はたら働くひと人たちがデモをおこ行なっています