Advanced Widget Customization

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

Custom Theming

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

const widget = 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 widget:

const widget = new ExpressCSV({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  container: '#csv-container',
  messages: {
    dragAndDrop: 'Drop your file here or click to browse',
    mappingTitle: 'Map 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 widget to implement custom behaviors:

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

widget.on('mappingComplete', (mapping) => {
  console.log('Mapping complete:', mapping);
});

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

widget.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 widget = 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.