react-pdf

@json-render/react-pdf

React PDF レンダラー。@react-pdf/renderer を使用して、JSON 仕様から PDF ドキュメントを生成します。

インストール

npm install @json-render/core @json-render/react-pdf

クイックスタート

import { renderToBuffer } from "@json-render/react-pdf";
import type { Spec } from "@json-render/core";

const spec: Spec = {
  root: "doc",
  elements: {
    doc: { type: "Document", props: { title: "Invoice" }, children: ["page"] },
    page: {
      type: "Page",
      props: { size: "A4" },
      children: ["heading", "table"],
    },
    heading: {
      type: "Heading",
      props: { text: "Invoice #1234", level: "h1" },
      children: [],
    },
    table: {
      type: "Table",
      props: {
        columns: [
          { header: "Item", width: "60%" },
          { header: "Price", width: "40%", align: "right" },
        ],
        rows: [
          ["Widget A", "$10.00"],
          ["Widget B", "$25.00"],
        ],
      },
      children: [],
    },
  },
};

const buffer = await renderToBuffer(spec);

レンダリング API

import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf";

// In-memory buffer
const buffer = await renderToBuffer(spec);

// Readable stream (pipe to HTTP response)
const stream = await renderToStream(spec);
stream.pipe(res);

// Direct to file
await renderToFile(spec, "./output.pdf");

すべてのレンダリング関数は、オプションの第 2 引数 { registry?, state?, handlers? } を受け取ります。

標準コンポーネント

コンポーネント	説明
Document	PDF の最上位ラッパー（ルートである必要があります）
Page	サイズ（A4、LETTER）、向き、余白を指定するページ
View	汎用コンテナー（パディング、マージン、背景、枠線）
Row, Column	間隔、配置、整列を指定するフレックスレイアウト
Heading	h1-h4 の見出しテキスト
Text	本文テキスト（フォントサイズ、色、太さ、配置）
Image	URL または base64 の画像
Link	テキストと href を含むハイパーリンク
Table	型指定された列と行を含むデータテーブル
List	順序付きリストまたは順序なしリスト
Divider	水平区切り線
Spacer	垂直方向の空白
PageNumber	現在のページ番号と総ページ数

カスタムカタログ

import { defineCatalog } from "@json-render/core";
import { schema, defineRegistry, renderToBuffer } from "@json-render/react-pdf";
import { standardComponentDefinitions } from "@json-render/react-pdf/catalog";
import { z } from "zod";

const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    Badge: {
      props: z.object({ label: z.string(), color: z.string().nullable() }),
      slots: [],
      description: "A colored badge label",
    },
  },
  actions: {},
});

const { registry } = defineRegistry(catalog, {
  components: {
    Badge: ({ props }) => (
      <View style={{ backgroundColor: props.color ?? "#e5e7eb", padding: 4 }}>
        <Text>{props.label}</Text>
      </View>
    ),
  },
});

const buffer = await renderToBuffer(spec, { registry });

外部ストア（制御モード）

状態を完全に制御するには、StateStore を渡します。

ネストされたリストでは、外側の repeat 内で repeat.statePath に { "$item": "field" } を設定できます。

import { createStateStore } from "@json-render/react-pdf";

const store = createStateStore({ invoice: { total: 100 } });
store.set("/invoice/total", 200);

サーバーセーフなインポート

React を読み込まずにスキーマとカタログをインポートします。

import { schema, standardComponentDefinitions } from "@json-render/react-pdf/server";