Stop wrestling with CSV imports

Every developer has been there. Users upload CSVs with columns in the wrong order, dates in different formats, and data that needs validation. You end up building the same import flow again and again.

ImportCSV handles it all for you:

• 🎯 Smart column mapping - AI-powered field matching
• ✨ One-click error fixing - Transform and validate data automatically
• ⚡ 10,000+ rows? No problem - virtual scrolling keeps it fast
• 📦 Tiny footprint - ~100KB gzipped, including styles

Quick Start

1npm install @importcsv/react

1import { CSVImporter } from '@importcsv/react';
2import { useState } from 'react';
3
4function App() {
5  const [isOpen, setIsOpen] = useState(false);
6
7  return (
8    <>
9      <button onClick={() => setIsOpen(true)}>Import CSV</button>
10
11      <CSVImporter
12        modalIsOpen={isOpen}
13        modalOnCloseTriggered={() => setIsOpen(false)}
14        onComplete={(data) => console.log(data.rows)}
15        columns={[
16          { id: 'name', label: 'Name', validators: [{ type: 'required' }] },
17          { id: 'email', label: 'Email', type: 'email' }
18        ]}
19      />
20    </>
21  );
22}

That's it! Your users get a polished import experience with column mapping, validation, and error handling.

Features

🚀 Core

• CSV, TSV, XLS, XLSX support (Excel support optional)
• Automatic encoding detection
• Header row detection
• Virtual scrolling for large files

🎯 Smart Mapping

• AI-powered column matching
• Fuzzy string matching

✨ Data Transformation

• "Fix All Errors" button - AI analyzes and fixes validation errors
• Natural language transformations ("convert dates to MM/DD/YYYY")
• Built-in transformers (capitalize, normalize phone, parse dates)
• Custom transformation functions

✅ Validation

• Required, unique, regex, min/max
• Email, phone, date formats
• Custom validators
• Real-time error display

🎨 Customization

• Dark mode support
• Custom CSS variables

📦 Framework Support

• React 16, 17, 18, 19
• Preact compatible
• Next.js (App & Pages Router)
• Vanilla JavaScript

Examples

Next.js App Router

1'use client';
2import { CSVImporter } from '@importcsv/react';

Vanilla JavaScript

1<script src="https://unpkg.com/@importcsv/react@latest/build/bundled/index.umd.js"></script>
2<script>
3  const importer = CSVImporter.createCSVImporter({
4    domElement: document.getElementById('app'),
5    columns: [/* ... */],
6    onComplete: (data) => console.log(data)
7  });
8
9  importer.showModal();
10</script>

With Validation & Transformation

1columns={[
2  {
3    id: 'email',
4    label: 'Email',
5    type: 'email',
6    validators: [{ type: 'required' }, { type: 'unique' }],
7    transformations: [{ type: 'lowercase' }, { type: 'trim' }]
8  }
9]}

Why ImportCSV?

Feature	ImportCSV	Build Your Own	Other Libraries
Setup time	5 minutes	Days/weeks	Hours
AI-powered fixes	✅	❌	❌
Virtual scrolling	✅	Maybe	Sometimes
Framework agnostic	✅	Your choice	Usually not
Bundle size	~100KB	Varies	200KB+
Theming	5 presets + custom	DIY	Limited

Resources

• 📚 Documentation - Complete guides and API reference
• 🐛 Issues - Report bugs or request features
• ⭐ GitHub - Star us if you like it!

License

MIT © ImportCSV

---