Validation Example

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

const employeeSchema = z.object({
  employee_id: z.string()
    .min(1, 'Employee ID is required')
    .regex(/^EMP[0-9]{3}$/, 'Format must be EMP001'),

  email: z.string()
    .email('Must be a valid email')
    .min(1, 'Email is required'),

  age: z.number()
    .int('Must be a whole number')
    .min(18, 'Must be 18 or older')
    .max(65, 'Must be under 65'),

  department: z.enum(['Engineering', 'Sales', 'Marketing', 'HR']),

  salary: z.number()
    .positive('Must be positive')
    .optional(),

  start_date: z.string()
    .datetime({ message: 'Must be ISO date' })
    .optional()
});

type Employee = z.infer<typeof employeeSchema>;

export default function EmployeeImporter() {
  return (
    <CSVImporter
      schema={employeeSchema}
      onComplete={(employees: Employee[]) => {
        // All data is validated and typed
        console.log(`Imported ${employees.length} employees`);
      }}
      invalidRowHandling="exclude" // Skip invalid rows
    />
  );
}

const schema = z.object({
  email: z.string().email(),
  confirm_email: z.string().email()
}).refine(data => data.email === data.confirm_email, {
  message: "Emails don't match",
  path: ['confirm_email']
});

// ImportCSV handles unique validation automatically
const schema = z.object({
  employee_id: z.string().min(1),
  email: z.string().email()
});

<CSVImporter
  schema={schema}
  // Add this prop to enable unique validation
  validateUnique={['employee_id', 'email']}
/>

// Block import if any rows invalid (default)
<CSVImporter schema={schema} invalidRowHandling="block" />

// Exclude invalid rows, import valid ones
<CSVImporter schema={schema} invalidRowHandling="exclude" />

// Include all rows, mark invalid
<CSVImporter schema={schema} invalidRowHandling="include" />

Employee ID,Email,Age,Department,Salary,Start Date
EMP001,john@example.com,28,Engineering,75000,2024-01-15T00:00:00Z
EMP002,jane@example.com,32,Sales,65000,2024-02-01T00:00:00Z