@spotable/spreadsheet-import-react

Headless React hooks for spreadsheet-import. Prop getters, no styling, no rendered markup — useSyncExternalStore wrapped around @spotable/spreadsheet-import-core.

npm i @spotable/spreadsheet-import-core @spotable/spreadsheet-import-react

React 18.3+ / 19. ESM only.

Use it

import { SpreadsheetImportProvider, useSpreadsheetImport, useFileDrop } from "@spotable/spreadsheet-import-react"
import { createCsvParser } from "@spotable/spreadsheet-import-core/parsers"

function Dropzone() {
  const { step, isBusy, error } = useSpreadsheetImport()
  const { getRootProps, getInputProps, isDragging } = useFileDrop()

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {/* your markup, your styling */}
    </div>
  )
}

<SpreadsheetImportProvider options={{ fields, parser: createCsvParser(), onSubmit: (r) => save(r.validData) }}>
  <Dropzone />
</SpreadsheetImportProvider>

Alongside useSpreadsheetImport and useFileDrop there is one hook per step — useSheetSelection, useHeaderSelection, useColumnMatching, useValidation — each returning state plus prop getters for the markup that step needs.

You render everything. If you would rather not, @spotable/spreadsheet-import-ui-shadcn and @spotable/spreadsheet-import-ui-react are a couple of hundred lines of markup over these same hooks — copy either one and change it.

Docs

Fields, validation, pipeline hooks and the full hook API are documented in the root README.

MIT