PORT CONTRACT

React controlled projection

A local React island renders fixed cells through the public provider, grid, selection, and pointer APIs.

Try this

Drag from one cell across another cell.
Read the selected range directly below the grid.
Start another drag to replace the range.

How it works

The caller owns this fixed 4×4 projection, the deterministic backend object, and an isolated Einfach store. The grid receives cells and the selected range as controlled inputs; the pointer-selection hook writes the range to that store.

This local demo does not fetch, persist, edit, or calculate workbook data. Its backend methods throw if called so the displayed projection remains explicit.

Availability boundary

The React adapter is private repository source, not a published npm package or a production integration path. Read the React adapter source guide before treating this controlled example as an application architecture.

View source

/** @jsxImportSource react */

import { createStore } from '@einfach/core'
import {
  setSelectionBoundsAtom,
  type CellCoord,
  type DisplayCell,
  type SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
  useSpreadsheetSelection,
} from '@einfach/react-excel'
import { useSpreadsheetPointerSelection } from '@einfach/react-excel/pointer-selection'
import type { PointerEvent as ReactPointerEvent } from 'react'
import './react-adapter-demo.css'

interface ReactAdapterDemoIslandProps {
  locale: 'en' | 'zh'
}

const GRID_WINDOW = { rowStart: 0, rowEnd: 3, colStart: 0, colEnd: 3 }
const GRID_CELLS: readonly DisplayCell[] = Array.from({ length: 16 }, (_, index) => ({