@importcsv/react 0.4.8 → 0.6.0

package/README.md

@@ -12,21 +12,14 @@
 
 </div>
 
-## What it does
-
-- **Column mapping** - Auto-matches columns, users fix the rest
-- **Validation** - Required, unique, email, regex, custom
-- **Large files** - Virtual scrolling handles 10k+ rows
-- **~125KB gzipped**
-
-Optional with backend: AI column matching, AI error fixing, natural language transforms.
-
-## Quick Start
+## Install
 
 ```bash
-npm install @importcsv/react
+npm install @importcsv/react zod
 ```
 
+## Quick Start
+
 ```tsx
 import { useState } from 'react';
 import { CSVImporter } from '@importcsv/react';
@@ -48,54 +41,40 @@ function App() {
         schema={schema}
         modalIsOpen={isOpen}
         modalOnCloseTriggered={() => setIsOpen(false)}
-        onComplete={(rows) => console.log(rows)}
+        onComplete={(result) => console.log(result.rows)}
       />
     </>
   );
 }
 ```
 
-Zod handles validation automatically. No need to define validators separately.
-
 ## Features
 
-**File handling**
-- CSV, TSV, XLS, XLSX
-- Automatic encoding detection
-- Header row detection
+- **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
 
-**Validation**
-- Required, unique, min/max, regex
-- Email, phone, date formats
-- Custom validators
+**File formats:** CSV, TSV, XLS, XLSX (Excel requires `npm install xlsx`)
 
-**Transforms**
-- trim, uppercase, lowercase, capitalize
-- normalize_phone, normalize_date
-- Custom functions
+**Frameworks:** React 16–19, Preact, Next.js
 
-**Frameworks**
-- React 16–19
-- Preact
-- Next.js (App & Pages Router)
+## Theming
 
-**Theming**
-- 7 presets: default, minimal, modern, compact, dark, corporate, playful
-- Custom themes via `theme` prop
-- Dark mode support
+```tsx
+<CSVImporter theme="dark" primaryColor="#10b981" />
+```
 
-## Examples
+Presets: `default`, `minimal`, `modern`, `compact`, `dark`, `corporate`, `playful`
 
-### Next.js App Router
+## Next.js / Preact
 
 ```tsx
+// Next.js App Router
 'use client';
 import { CSVImporter } from '@importcsv/react';
-```
-
-### Preact
 
-```tsx
+// Preact
 import { CSVImporter } from '@importcsv/react/preact';
 ```
 
@@ -103,15 +82,15 @@ import { CSVImporter } from '@importcsv/react/preact';
 
 With the [ImportCSV backend](https://github.com/importcsv/importcsv/tree/main/backend):
 
-- **AI column matching**
-- **AI error fixing** - Automatically fix validation errors
-- **Natural language transforms** - "Convert dates to MM/DD/YYYY"
+- AI column matching
+- AI error fixing
+- Natural language transforms
 
-## Resources
+## Links
 
 - [Documentation](https://docs.importcsv.com)
-- [Issues](https://github.com/importcsv/importcsv/issues)
 - [GitHub](https://github.com/importcsv/importcsv)
+- [Issues](https://github.com/importcsv/importcsv/issues)
 
 ## License
 

package/build/react/index.d.ts

@@ -100,13 +100,39 @@ export interface ThemeConfig {
     };
 }
 
+/**
+ * Result structure returned by onComplete callback.
+ * Contains imported rows with their data and column metadata.
+ */
+export interface ImportResult<T = Record<string, unknown>> {
+    rows: (T & {
+        /** Values from dynamicColumns, keyed by column id */
+        _custom_fields?: Record<string, unknown>;
+        /** Values from unmapped CSV columns (when includeUnmatchedColumns is true) */
+        _unmatched?: Record<string, unknown>;
+    })[];
+    columns: {
+        /** Columns from the columns prop */
+        predefined: Column[];
+        /** Columns from the dynamicColumns prop */
+        dynamic: Column[];
+        /** CSV column names that were not mapped to any column */
+        unmatched: string[];
+    };
+}
+
 export interface CSVImporterProps {
     columns?: Column[];
+    /**
+     * Customer-specific dynamic columns passed at runtime.
+     * These appear after predefined columns in the mapping dropdown.
+     * Output is nested under _custom_fields in each row.
+     */
+    dynamicColumns?: Column[];
     importerKey?: string;
-    onComplete?: (data: any) => void;
+    onComplete?: (data: ImportResult) => void;
     backendUrl?: string;
-    user?: Record<string, any>;
-    metadata?: Record<string, any>;
+    context?: Record<string, any>;
     theme?: ThemeConfig | 'default' | 'minimal' | 'modern' | 'compact' | 'dark';
     darkMode?: boolean;
     primaryColor?: string;