Basic Example

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

// Define your data schema
const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  phone: z.string().optional()
});

type Contact = z.infer<typeof schema>;

export default function BasicImport() {
  const [isOpen, setIsOpen] = useState(false);

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

      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        schema={schema}
        onComplete={(data: Contact[]) => {
          console.log(`Imported ${data.length} contacts`);
          // data is fully typed: data[0].name, data[0].email, data[0].phone
          setIsOpen(false);
        }}
      />
    </>
  );
}

Name,Email,Phone
John Doe,john@example.com,555-0100
Jane Smith,jane@example.com,555-0101