Configuration Options

ExpressCSV offers a wide range of configuration options to customize the behavior and appearance of the CSV importer.

Basic Configuration

The following example shows the basic configuration options:

import { ExpressCSV } from 'expresscsv';

<ExpressCSV
  onComplete={(data) => handleImportedData(data)}
  onError={(error) => handleError(error)}
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' }
  ]}
/>

All Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | onComplete | Function | required | Callback function that receives the processed data after a successful import | | onError | Function | undefined | Callback function that receives any errors that occur during the import process | | columns | Array | [] | An array of column configurations (see Column Configuration below) | | maxRows | Number | 10000 | Maximum number of rows that can be imported | | maxColumns | Number | 50 | Maximum number of columns that can be imported | | allowedFileTypes | Array | ['.csv', '.tsv', '.txt'] | Array of allowed file extensions | | delimiters | Array | [',', '\t', ';', '|'] | Array of delimiters to try when parsing the CSV | | theme | Object | {} | Custom theme options (see Theme Configuration below) | | labels | Object | {} | Custom labels for UI elements | | showSampleData | Boolean | true | Whether to show sample data during the matching step | | sampleRowCount | Number | 5 | Number of sample rows to show during the matching step | | autoMatchColumns | Boolean | true | Whether to attempt automatic column matching | | autoMatchThreshold | Number | 0.7 | Confidence threshold for automatic column matching (0-1) | | skipEmptyRows | Boolean | true | Whether to skip empty rows in the CSV file | | skipHeaderRow | Boolean | true | Whether to skip the header row in the CSV file | | trimValues | Boolean | true | Whether to trim whitespace from cell values |

Column Configuration

Each column in the columns array can have the following properties:

{
  key: 'email',
  label: 'Email Address',
  required: true,
  type: 'string', // 'string', 'number', 'boolean', 'date'
      match: ['email', 'e-mail', 'mail'], // Strings to match for auto-matching
  validate: (value) => {
    // Return true if valid, or an error message string if invalid
    return /\S+@\S+\.\S+/.test(value) ? true : 'Invalid email format';
  },
  transform: (value) => value.toLowerCase(), // Transform before validation
  accept: ['active', 'inactive'], // Only for enum-like fields
  default: '',  // Default value if empty
}

Theme Configuration

Customize the appearance of the importer:

<ExpressCSV
  theme={{
    primary: '#4f46e5', // Primary color
    secondary: '#818cf8', // Secondary color
    accent: '#c7d2fe', // Accent color
    background: '#ffffff', // Background color
    text: '#111827', // Text color
    borderRadius: '0.5rem', // Border radius
    fontFamily: 'Inter, system-ui, sans-serif', // Font family
  }}
/>

Labels Customization

Customize the text labels in the UI:

<ExpressCSV
  labels={{
    dropzone: 'Drag and drop your CSV file here',
    browse: 'Browse files',
    next: 'Continue',
    back: 'Back',
    matching: 'Match Columns',
    review: 'Review Data',
    complete: 'Complete Import',
    selectColumn: 'Select a column',
    requiredField: 'Required field',
    noMatchFound: 'No match found',
    dragToReorder: 'Drag to reorder',
  }}
/>

Next Steps

For more information about the API methods and events, check out the API Methods documentation.