Overview

@expresscsv/react gives you a hook-first API with reactive widget state and automatic cleanup on unmount.

Why Use React

• Works naturally inside React components
• Gives you reactive widget state like isOpen, isReady, and lastError
• Supports the same schema, chunking, webhook, theming, and localization features as the base SDK
• Fits cleanly into your existing component lifecycle and event handlers

Mental Model

1. Define a schema with x.row().
2. Call useExpressCSV() in your component.
3. Pass schema, publishableKey, and importIdentifier.
4. Trigger open() from a user action.
5. Handle validated records with onData, webhook, or both.

Basic Example

import { useExpressCSV, x } from "@expresscsv/react";

const productSchema = x.row({
  name: x.string().label("Full Name"),
  email: x.string().email().label("Email Address"),
});

export function ImportUsersButton() {
  const { open, isReady } = useExpressCSV({
    schema: productSchema,
    publishableKey: "pk_test_...",
    importIdentifier: "user-import",
    title: "Import users",
  });

  return (
    <button
      type="button"
      disabled={!isReady}
      onClick={() =>
        open({
          onData: (chunk, next) => {
            console.log(chunk.records);
            next();
          },
        })
      }
    >
      Import Users
    </button>
  );
}

Next Steps

• Build your first import in Quickstart
• Types — define field types, validation rules, and TypeScript types
• Styling — theme the widget to match your app
• Webhooks — deliver records to your backend
• API Reference — full option and return value reference