@importcsv/react

CSV imports for React

Demo • Docs

Install

npm install @importcsv/react zod

Quick Start

import { useState } from 'react';
import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Import CSV</button>

      <CSVImporter
        schema={schema}
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        onComplete={(result) => console.log(result.rows)}
      />
    </>
  );
}

Features

• Column mapping — Auto-matches headers to your schema
• Zod validation — Type-safe with automatic error messages
• Large files — Virtual scrolling handles 100k+ rows
• ~100KB gzipped — Styles included

File formats: CSV, TSV, XLS, XLSX (Excel requires npm install xlsx)

Frameworks: React 16–19, Preact, Next.js

Theming

<CSVImporter theme="dark" primaryColor="#10b981" />

Presets: default, minimal, modern, compact, dark, corporate, playful

Next.js / Preact

// Next.js App Router
'use client';
import { CSVImporter } from '@importcsv/react';

// Preact
import { CSVImporter } from '@importcsv/react/preact';

AI Features (Backend Required)

With the ImportCSV backend:

• AI column matching
• AI error fixing
• Natural language transforms

Links

• Documentation
• GitHub
• Issues

License

MIT