React CSV importer

Install

npm install csvjetty

CSVJetty supports React 18 and React 19. Create an importer in the dashboard before integrating so you have an importer key to pass to the component. If the importer model is new to you, read Importers first.

Basic usage

import CSVJetty from "csvjetty";
export default function ImportContacts() {  return (    <CSVJetty      importerKey="YOUR_IMPORTER_KEY"      onData={async ({ rows }) => {        console.log(rows);      }}    >      Import contacts    </CSVJetty>  );}

The component renders its children as the launch button. Clicking it opens the importer in a modal without navigating away from your application.

Save imported records

In production, send records from onData to an authenticated API you control. Validate the records again on the server before writing them to your database.

import CSVJetty from "csvjetty";
export default function ImportContacts() {  return (    <CSVJetty      importerKey="YOUR_IMPORTER_KEY"      onData={async ({ rows, importId, rowNumbers }) => {        const response = await fetch("/api/contacts/import", {          method: "POST",          headers: { "Content-Type": "application/json" },          body: JSON.stringify({ rows, importId, rowNumbers }),        });
        if (!response.ok) {          throw new Error("Could not save contacts.");        }
        const body = await response.text();        return body ? JSON.parse(body) : undefined;      }}      onComplete={({ importId, accepted, rejected }) => {        console.log({ importId, accepted, rejected });      }}    >      Import contacts    </CSVJetty>  );}

See Callback delivery for row-level errors and Import payload for the exact fields you receive.

Importer lifecycle

• onData runs when callback delivery is ready to save a batch of rows.
• onComplete receives the final import ID and accepted/rejected counts.
• onClose runs when the importer modal closes.
• Throw from onData when the batch could not be saved.
• Return row-level errors from onData when only specific records should be rejected.

The complete prop contract is in CSVJetty component props.

Requirements

• React 18 or 19.
• A public CSVJetty importer key.
• An onData handler when the importer uses callback delivery.
• HTTPS in production; localhost is supported for local development.

See Limits & requirements for file, row, and plan limits.