@love-rox/ptpt-react

@love-rox/ptpt-core は依存として自動的に引き込まれます。react（>=18）はピア依存です。既定の見た目には @love-rox/ptpt-core/styles.css を一度 import してください。

<PatapataBoard> に targets 文字列を渡すだけ——セル数は文字列の長さから決まります。cellOptions は全セルに共通で適用されます。各文字が所定の値までめくれ、盤面は時間差で動きます。targets を変えると新しいフリップが走ります。

import { PatapataBoard } from "@love-rox/ptpt-react";
import { alphanumericPreset } from "@love-rox/ptpt-core/presets/alphanumeric";
import "@love-rox/ptpt-core/styles.css";

export function Departures() {
  return (
    <PatapataBoard
      cellOptions={{ preset: alphanumericPreset }}
      targets="TOKYO  "
      flipMode="replace"
    />
  );
}

<Patapata> は CellOptions のすべてのフィールドに加え、下記のコンポーネント専用プロパティを受け付けます。共通オプションは Vue / rehype / Astro と完全に同じ意味で動きます。

• ▸構造に関わるオプションはマウント時に読まれます。作り直したいときは key を渡してください。target / targets を変えるだけならフリップが走るだけです。
• ▸flipMode="replace"（既定）は連続更新を最新の目標にまとめます。flipMode="queue" は順番に消化します。
• ▸盤面は1つの role="status" ライブリージョンです。onFlipComplete は各フリップが落ち着いたあとに呼ばれます。
• ▸preset には文字列ではなくプリセットオブジェクト（preset={digitsPreset}）を渡してください。文字列はプリセット名ではなく、フラップの文字列そのものとして扱われます。

Vue を使っているなら同じ API の Vue 版があります。Markdown のレンダリングや静的サイトの生成なら、React を持ち込まずに rehype / Astro 版が build 時に処理します。