React

@sheetwrite/react wraps a Grid in a React component. It initializes WASM after the component mounts on the client, so the page stays server-renderable.

Package

@sheetwrite/react

Components

Sheetwrite, SheetwriteGrid

Grid access

Forwarded ref and onReady

Change events

onGridChange prop

Install

$ npm install @sheetwrite/react

Import @sheetwrite/react/styles.css once in your app.

Mount a grid

Use Sheetwrite for the simple columns and defaultRows contract. Use SheetwriteGrid when the host supplies a Workbook plus eager data or a datasource.

import { Sheetwrite, type GridReadyEvent, type SimpleColumn } from "@sheetwrite/react";
import type { Transaction } from "@sheetwrite/core";
import "@sheetwrite/react/styles.css";

type Row = { name: string; amount: number };

interface SheetProps {
  columns: readonly SimpleColumn<Row>[];
  rows: readonly Row[];
  save: (transaction: Transaction) => void;
  onReady: (event: GridReadyEvent) => void;
}

export function Sheet({ columns, rows, save, onReady }: SheetProps) {
  return (
    <Sheetwrite
      columns={columns}
      defaultRows={rows}
      height={420}
      onGridChange={(event) => save(event.transaction)}
      onReady={onReady}
    />
  );
}

Listen to changes

onGridChange reports committed Grid changes. onReady receives { grid, generation, reason } after the forwarded ref is assigned.

Resets and cleanup

Replacing a reset-sensitive input creates a new Grid generation. Destroy the persistence and sync coordinators that you attached to the previous Grid, then attach new ones in onReady. The lifecycle page lists which inputs update in place and which reset.

Server rendering

Rendering the component on the server does not initialize WASM. In frameworks that render on the server, mount it in a client component.