React アダプタ

@love-rox/tcy-react

Name: tate-chu-yoko
Author: Love-Rox

React 17+ 向けの `<Tcy>` コンポーネント。子要素を再帰的に走査し、半角英数字の run を `<span class="tcy">` で包みます。SSR で決定性のある DOM を保証します。

v0.3.0MITSSR-safe

デモ npm で見る GitHub

インストール

@love-rox/tcy-core は依存として自動的に引き込まれるので、別途インストールする必要はありません。

bun

bun add @love-rox/tcy-react

pnpm

pnpm add @love-rox/tcy-react

npm

npm i @love-rox/tcy-react

yarn

yarn add @love-rox/tcy-react

使い方

縦組みにしたい親要素（writing-mode: vertical-rl）の中で、対象範囲を <Tcy> で包むだけです。children の文字列ノードだけを書き換え、要素ノードはそのまま再帰的に処理します。

Reacttsx

import { Tcy } from "@love-rox/tcy-react";

export function Chapter() {
  return (
    <p style={{ writingMode: "vertical-rl" }}>
      <Tcy>第1章 2026年4月、Webの縦書きは進化した。</Tcy>
    </p>
  );
}

オプション

<Tcy> は以下のオプションを受け付けます。共通オプションは Vue / rehype / Astro と完全に同じ意味で動きます。

共通オプション

オプション	型	既定値	説明
target	'alphanumeric' \| 'alpha' \| 'digit' \| 'ascii' \| RegExp	'alphanumeric'	縦中横対象として扱う文字種。`alphanumeric` は `[0-9A-Za-z]`、`ascii` は印字可能な ASCII 全般。任意の RegExp も指定可能。
combine	boolean	true	連続した対象文字を1つのスパンにまとめるか。`false` にすると1文字ずつ別々のスパンで包みます。
include	string \| string[]	undefined	`target` に含まれなくても対象として扱う追加の文字。
exclude	string \| string[]	undefined	対象から外したい文字。`include` より優先されます。
maxLength	number	undefined	縦中横セグメントの最大文字数。これを超える長さの英数字 run はプレーンテキストに戻ります。たとえば `maxLength: 2` にすると `2026` のような4桁年は寝かせ、`1` や `19` の短い run のみを縦中横にできます。
excludeWords	string[]	undefined	縦中横にしたくない語を完全一致で指定（部分一致ではなくセグメント値全体のマッチ）。`URL` `API` のような固有の略号や、特定の年号だけを横倒しのまま残したいときに便利。

コンポーネント専用プロパティ

オプション	型	既定値	説明
className	string	'tcy'	生成される span に付与するクラス名。
as	keyof JSX.IntrinsicElements	'span'	ラップに使用するタグ名。

挙動の注記

<em>12</em>34 のように要素境界をまたぐ文字列は連結されず、別々のスパンになります。
全角英数字（Ａ〜Ｚ / ０〜９）は既定で対象外。縦組みでも既に正立して表示されるためです。
SSR-safe。サーバーとクライアントで同じ DOM を生成するため hydration mismatch は起きません。
children に React Element が含まれていても、その中のテキストノードまで再帰的に処理します。

他のアダプタ

Vue を使っているなら同じ API の Vue 版があります。Markdown / Astro パイプラインなら React を持ち込まずに rehype / Astro 版が使えます。

← パッケージ一覧に戻る