einfach/excel

PRE-RELEASE FRAMEWORK REFERENCE

React adapter source

Render a caller-owned projection in React while the workbook boundary remains explicit.

STATUS: REPOSITORY SOURCE ONLY

@einfach/react-excel is a private workspace package at version 0.0.0. It is not on npm, does not ship a default Worker or WASM backend, and is not a drop-in spreadsheet application. Do not add an npm install command to your product documentation yet.

1. Install the repository workspace

The React adapter is consumed from this repository today, so install the workspace once before running its fixture.

git clone https://github.com/allroad88888888/einfach-excel.git
cd einfach-excel
pnpm install

2. Run the verified React fixture

NO_PROXY=localhost,127.0.0.1 pnpm --filter @einfach/react-excel run e2e

This command starts the repository's Vite fixture, opens Chromium, drags from one controlled cell to another, and verifies the projected selection. A successful run reports one passing React adapter test.

3. Understand the available boundary

Controlled gridRender a visible cell projection that your application already owns.
Provider hooksBridge selection, navigation, editing, clipboard, and history to UI-core atoms.
Explicit backendSupply your own SpreadsheetBackend; no default data or compute runtime is hidden.

4. Compose one controlled projection

This is a repository-source pattern, not a package-install recipe. The React host owns the backend, cells, and requested window.

import type {
  CellRange,
  DisplayCell,
  SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
} from '@einfach/react-excel'

type ProjectionProps = {
  backend: SpreadsheetBackend
  cells: readonly DisplayCell[]
  window: CellRange
}

export function ReactSpreadsheet({ backend, cells, window }: ProjectionProps) {
  return (
    <SpreadsheetUiProvider backend={backend}>
      <SpreadsheetGridView cells={cells} window={window} />
    </SpreadsheetUiProvider>
  )
}

5. Keep these responsibilities in the host

  1. Keep the backend instance stable for the lifetime of one workbook; replacing it deliberately creates a new UI core.
  2. Fetch or derive the bounded projection, then pass its cells and window to the controlled view.
  3. Use the nearest-provider hooks when you add interaction. Do not create a second React state store for spreadsheet product state.

6. Inspect the interactive reference

Run the React projection demoDrag across its fixed 4×4 grid and inspect the selected range. →Read the exact host sourceIt supplies a deterministic backend, store, projection, and pointer selection. →Read the package boundarySee the supported primitives and the deliberate non-goals. →

What is not ready

There is no published React release, default Worker factory, WASM packaging, browser support promise, or turnkey shell. For a production integration today, use the supported Solid path or implement the backend port while the React adapter matures.