@bernierllc/csv-ui

React components for CSV import interfaces with drag-and-drop, column mapping, validation, and real-time feedback.

Installation

npm install @bernierllc/csv-ui

Features

• File Upload - Drag-and-drop CSV file upload with validation
• Column Mapping - Visual column-to-field mapping with auto-suggestions
• Data Preview - Interactive data preview with validation highlighting
• Import Wizard - Complete step-by-step import workflow
• Real-time Validation - Live validation feedback with error correction
• Accessibility - WCAG 2.1 AA compliant with full keyboard navigation
• TypeScript - Full TypeScript support with comprehensive type definitions

Quick Start

import { CSVImportWizard } from '@bernierllc/csv-ui';

const schema = {
  fields: [
    { name: 'name', type: 'string', required: true },
    { name: 'email', type: 'string', required: true },
    { name: 'age', type: 'number', required: false }
  ]
};

function MyComponent() {
  const handleComplete = (result) => {
    console.log('Import completed:', result);
  };

  return (
    <CSVImportWizard
      onComplete={handleComplete}
      initialSchema={schema}
      title="Import Users"
    />
  );
}

Components

CSVImportWizard

Complete wizard component that handles the entire CSV import flow:

<CSVImportWizard
  onComplete={(result) => console.log(result)}
  onCancel={() => console.log('cancelled')}
  initialSchema={schema}
  allowedFileTypes={['.csv', '.txt']}
  maxFileSize={10 * 1024 * 1024}
  validationEnabled={true}
/>

FileUpload

Drag-and-drop file upload component:

<FileUpload
  onFileSelect={(file) => console.log(file)}
  acceptedTypes={['.csv', '.txt']}
  maxSize={5 * 1024 * 1024}
/>

ColumnMapper

Visual column mapping interface:

<ColumnMapper
  headers={['Name', 'Email', 'Age']}
  schema={schema}
  mapping={mapping}
  onMappingChange={setMapping}
  onAutoMap={() => console.log('auto-map')}
/>

DataPreview

Interactive data preview with validation:

<DataPreview
  data={csvData}
  schema={schema}
  mapping={mapping}
  validationErrors={errors}
  maxRows={50}
/>

ValidationDisplay

Validation results with error details:

<ValidationDisplay
  errors={validationErrors}
  showSuggestions={true}
  onErrorClick={(error) => console.log(error)}
/>

Hooks

useCSVImport

Complete CSV import state management:

const {
  currentStep,
  file,
  data,
  schema,
  mapping,
  validationErrors,
  isProcessing,
  setFile,
  setMapping,
  nextStep,
  startImport
} = useCSVImport({
  initialSchema: schema,
  onComplete: (result) => console.log(result)
});

useColumnMapping

Column mapping utilities:

const {
  mapping,
  suggestions,
  autoMap,
  mapColumn,
  clearMapping
} = useColumnMapping({
  headers: csvHeaders,
  schema: importSchema,
  onMappingChange: setMapping
});

TypeScript

All components are fully typed. Import types as needed:

import type {
  ImportSchema,
  ColumnMapping,
  ValidationError,
  ImportResult,
  FileUploadProps,
  CSVImportWizardProps
} from '@bernierllc/csv-ui';

Styling

Components use Tailwind CSS classes. Include Tailwind in your project or provide custom styles.

Accessibility

• Full keyboard navigation support
• Screen reader compatible
• WCAG 2.1 AA compliant
• Focus management and ARIA labels
• High contrast support

License

Copyright (c) 2025 Bernier LLC. All rights reserved.