DEV Community

Cover image for How I Replaced Weeks of CSV Import Code With One React Component
Gissur Runarsson
Gissur Runarsson

Posted on

How I Replaced Weeks of CSV Import Code With One React Component

You're building your app. Things are going well. Then a customer asks: "Can we bulk import our data from a spreadsheet?"

You think: easy, I'll just parse a CSV. Then reality hits:

  • Users have different column names ("Email" vs "email_address" vs "E-Mail")
  • Data needs validation before it touches your database
  • You need a UI for column mapping
  • Error handling has to be clear enough that non-technical users can fix their file
  • Oh, and someone uploads an Excel file, not CSV

Two weeks later you have a half-decent import flow that you'll maintain forever.

What I built instead

I kept solving this same problem for different projects, so I built ImportKit - a drop-in widget that handles the entire

import flow.

npm install @importkit/react

import { ImportWidget } from '@importkit/react'

apiKey="your_key"
fields={[
{ name: 'email', type: 'email', required: true },
{ name: 'name', type: 'text' },
{ name: 'phone', type: 'phone' },
{ name: 'company', type: 'text' }
]}
onComplete={(data) => {

// Clean, validated JSON - save to your DB

saveToDatabase(data)

}}

/>

That's the entire integration.

What happens under the hood

  1. User uploads a file - CSV or Excel, doesn't matter
  2. AI suggests column mapping - "Email Address" in their file → email in your schema. Uses OpenAI to understand intent, not just exact matches
  3. Validation runs automatically - email format, required fields, custom rules. Users see clear errors and can fix them inline
  4. You get clean data - the onComplete callback fires with validated, mapped JSON ready for your database

The AI mapping is the key part

The hard problem with CSV imports isn't parsing - it's that every user names their columns differently. "First Name",

"first_name", "fname", "Given Name" all mean the same thing.

Instead of building a lookup table that never covers every case, ImportKit sends the column headers and your field

definitions to an AI model that understands the semantic meaning. It works out of the box with messy real-world data.

Who it's for

Any SaaS that needs users to import data: CRMs, project management tools, HR platforms, anything with

contacts/products/records.

If you've ever built a CSV importer from scratch, you know the pain. This replaces it.

Free tier available if you want to try it: https://importkit.app

Would love to hear from anyone who's tackled this problem differently.

Top comments (0)