Advanced importer customization

This guide explains how to customize the ExpressCSV importer to better match your application's look and feel.

Custom Theming

You can customize the appearance of the importer using the theming options:

const importer = new ExpressCSV({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  container: '#csv-container',
  theme: {
    colors: {
      primary: '#3366FF',
      secondary: '#6C63FF',
      success: '#0ACF83',
      error: '#FF3B30',
      background: '#FFFFFF',
      text: '#333333',
    },
    fonts: {
      base: 'Inter, sans-serif',
      heading: 'Inter, sans-serif',
    },
    borderRadius: '8px',
  },
});

Custom Messages

You can customize the text and messages shown in the importer:

const importer = new ExpressCSV({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  container: '#csv-container',
  messages: {
    dragAndDrop: 'Drop your file here or click to browse',
    matchingTitle: 'Match your data fields',
    successMessage: 'Your data has been successfully imported',
    errorMessage: 'There was an error processing your file',
  },
});

Event Handling

Listen to events from the importer to implement custom behaviors:

importer.on('fileSelected', (file) => {
  console.log('File selected:', file.name);
});

importer.on('matchingComplete', (matching) => {
  console.log('Matching complete:', matching);
});

importer.on('importSuccess', (data) => {
  console.log('Import successful:', data);
  // Maybe redirect to another page
  window.location.href = '/dashboard';
});

importer.on('importError', (error) => {
  console.error('Import error:', error);
  // Show custom error message
  showCustomErrorNotification(error.message);
});

Custom Validation

Implement custom validation logic for imported data:

const importer = new ExpressCSV({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  container: '#csv-container',
  validation: {
    email: (value) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(value) ? null : 'Invalid email format';
    },
    phone: (value) => {
      const phoneRegex = /^\+?[1-9]\d{9,14}$/;
      return phoneRegex.test(value) ? null : 'Invalid phone number';
    },
  },
});

For more customization options, refer to our API documentation.