React

Add a complete CSV and Excel importer to your React app, with column mapping, real-time validation, and API integration built in.

Installation

Install both packages:

1npm install @importok/javascript @importok/react

Note: The trial version is available on NPM. When you upgrade, you'll get access to our private packages with full features. No code changes required.

Your first importer

Create a basic contact importer:

 1import ImportokWizard from '@importok/react';
 2 
 3function App() {
 4  // Define the fields you want to import
 5  const fields = {
 6    first_name: { label: 'First Name' },
 7    last_name: { label: 'Last Name' },
 8    email: { label: 'Email' },
 9    phone: { label: 'Phone' },
10    country: { label: 'Country' }
11  };
12 
13  return (
14    <div className="App">
15      <ImportokWizard
16        title="Import Contacts"
17        fields={fields}
18      />
19    </div>
20  );
21}

That's it. Users can now upload CSV or Excel files and map columns to your fields.

Make it production-ready

Add data transformations

Clean up data before validation using transformers:

 1const fields = {
 2  first_name: {
 3    label: 'First Name',
 4    transformers: 'trim|capitalize'  // Built-in transformers
 5  },
 6  last_name: {
 7    label: 'Last Name',
 8    transformers: 'trim|capitalize'
 9  },
10  email: {
11    label: 'Email',
12    transformers: 'trim'
13  }
14};

See all built-in transformers →

Add validation rules

Catch errors before they reach your API using validators:

 1const fields = {
 2  first_name: {
 3    label: 'First Name',
 4    transformers: 'trim|capitalize'
 5  },
 6  last_name: {
 7    label: 'Last Name',
 8    transformers: 'trim|capitalize',
 9    validators: 'required'  // Built-in validators
10  },
11  email: {
12    label: 'Email',
13    transformers: 'trim',
14    validators: 'email|required'
15  }
16};

See all built-in validators →

Connect to your API

Send validated data to your backend:

 1function App() {
 2  const fields = { /* ... */ };
 3 
 4  const handleImport = async function (records, meta) {
 5    const response = await fetch('/api/contacts/imports', {
 6      method: 'POST',
 7      headers: { 'Content-Type': 'application/json' },
 8      body: JSON.stringify(records)
 9    });
10 
11    return response;
12  };
13 
14  return (
15    <ImportokWizard
16      title="Import Contacts"
17      fields={fields}
18      onImportReady={handleImport}
19    />
20  );
21}

Complete example

Here's everything together:

 1import ImportokWizard from '@importok/react';
 2 
 3function App() {
 4  const fields = {
 5    first_name: {
 6      label: 'First Name',
 7      transformers: 'trim|capitalize'
 8    },
 9    last_name: {
10      label: 'Last Name',
11      transformers: 'trim|capitalize',
12      validators: 'required'
13    },
14    email: {
15      label: 'Email',
16      transformers: 'trim',
17      validators: 'email|required'
18    },
19    phone: {
20      label: 'Phone',
21      transformers: 'trim'
22    },
23    country: {
24      label: 'Country',
25      transformers: 'trim',
26      validators: 'in:countries'
27    }
28  };
29 
30  const handleImport = async function (records, meta) {
31    return await fetch('/api/contacts/imports', {
32      method: 'POST',
33      headers: { 'Content-Type': 'application/json' },
34      body: JSON.stringify(records)
35    });
36  };
37 
38  return (
39    <div className="App">
40      <ImportokWizard
41        title="Import Contacts"
42        fields={fields}
43        onImportReady={handleImport}
44      />
45    </div>
46  );
47}

Next steps

Now that you have a working importer, explore advanced features:

• Custom validators - Add business-specific validation rules
• Custom transformers - Create domain-specific data cleanup
• Data providers - Connect dropdowns to your API
• Props & events - Customize behavior and styling
• Field configuration - Deep dive into field options

Try it live

Experiment with a complete example in StackBlitz: Open in StackBlitz →

Trial limitations

The free trial includes:

• ✅ Full UI and mapping features
• ✅ Built-in validators and transformers
• ⚠️ 20 records per import (unlimited on paid plans)
• ⚠️ Up to 2 custom validators (unlimited on paid plans)
• ⚠️ Up to 2 custom transformers (unlimited on paid plans)
• ⚠️ Up to 2 data providers (unlimited on paid plans)

When you're ready, upgrade to unlock full features with access to our private packages.