Basic Example

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

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

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

      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        onComplete={(result) => {
          setData(result);
          setIsOpen(false);
        }}
        columns={[
          { id: 'name', label: 'Name' },
          { id: 'email', label: 'Email' },
          { id: 'phone', label: 'Phone' }
        ]}
      />

      {data && (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </>
  );
}

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

{
  "success": true,
  "data": [
    {
      "index": 1,
      "values": ["John Doe", "john@example.com", "555-0100"]
    },
    {
      "index": 2,
      "values": ["Jane Smith", "jane@example.com", "555-0101"]
    }
  ],
  "mappedData": [
    {
      "data": {
        "name": "John Doe",
        "email": "john@example.com",
        "phone": "555-0100"
      }
    },
    {
      "data": {
        "name": "Jane Smith",
        "email": "jane@example.com",
        "phone": "555-0101"
      }
    }
  ],
  "num_rows": 2,
  "num_columns": 3,
  "headers": ["Name", "Email", "Phone"],
  "columnMapping": {
    "0": { "id": "name", "label": "Name", "include": true },
    "1": { "id": "email", "label": "Email", "include": true },
    "2": { "id": "phone", "label": "Phone", "include": true }
  }
}