Next.js

importOK is a reusable custom web component that embeds an import wizard into your app. You can follow this installation guide to use it as a React component, in your Next.js project.

#Installation

For the sake of simplicity, we are going to install and configure importOK to import a list of Contacts. Our app will be expecting four fields: first name last name email and phone

First, import the importOK package for React:

1npm install @importok/javascript
2npm install @importok/react

To embed the wizard, add the following into your page. The wizard will be added as a child element to the first argument provided, so make sure to adjust that accordingly.

 1import dynamic from 'next/dynamic';
 2 
 3const ImportokWizard = dynamic(() => import('@importok/react'), {
 4  ssr: false
 5});
 6 
 7export default function Home() {
 8  /**
 9    * Import fields to be mapped
10    * Check https://importok.io/docs/fields for more details
11    */
12  const fields = {
13    first_name: {
14      label: 'First Name',
15      transformers: 'capitalize|trim'
16    },
17    last_name: {
18      label: 'Last Name',
19      validators: 'required',
20      transformers: 'capitalize|trim'
21    },
22    email: {
23      label: 'Email',
24      validators: 'email|required',
25      transformers: 'lowercase|trim'
26    },
27    phone: {
28      label: 'Phone',
29      transformers: 'trim'
30    }
31  };
32 
33  /**
34    * Custom transformers
35    * Check https://importok.io/docs/custom-transformers for more details
36    */
37  const transformers = {};
38 
39  /**
40    * Custom validators
41    * Check https://importok.io/docs/custom-validators for more details
42    */
43  const validators = {};
44 
45  /**
46    * Custom providers
47    * Check https://importok.io/docs/data-providers for more details
48    */
49  const providers = {};
50 
51  /**
52    * Push the provided record to the API
53    * Check https://importok.io/docs/webhooks for more details
54    */
55  const saveRecord = async function (record, meta) {
56    return await fetch('https://httpstat.us/200');
57  };
58 
59  return (
60    <div className="App">
61      <ImportokWizard
62        title="ImportOK Example for Next.js"
63        fields={fields}
64        transformers={transformers}
65        validators={validators}
66        providers={providers}
67        onRecordReady={saveRecord}
68      />
69    </div>
70  );
71}

That's all! You can now open your page and give it a try. Keep in mind that there is a limit of 20 records for each import during the trial. Once subscribed, you will receive access to the private packages and lift the trial limits.

title

subtitles

[
'Upload your file to get started',
'Match source to target columns',
'Review validation errors and fix your data',
'Please do not close this window during the import process.',
]

fields

transformers

validators

providers

mapper

style

locale

translations

sampleFile

uploadedFile

throttle

meta

onRecordReady

onImportReady

onImportProgress

onStepEnter

onStepExit