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

The tester version of the importOK JavaScript and React components are available on NPM, while the full (paid) versions are hosted in a private repository. Both versions are fully compatible and no code changes are required when upgrading to the full (paid) versions.

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

#Usage

To embed the importOK wizard in your Next.js project, simply add the following snippet to your component or page. This will render the interactive import wizard, allowing users to import data seamlessly. For a complete list of configuration options, including available props and event handlers, refer to the Props & Events section of the documentation.

 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 
14  /**
15    * Custom transformers
16    * Check https://importok.io/docs/transformers for more details
17    */
18  const transformers = {};
19 
20  /**
21    * Custom validators
22    * Check https://importok.io/docs/validators for more details
23    */
24  const validators = {};
25 
26  /**
27    * Custom providers
28    * Check https://importok.io/docs/data-providers for more details
29    */
30  const providers = {};
31 
32  /**
33    * Push the provided record to the API
34    * Check https://importok.io/docs/webhooks for more details
35    */
36  const saveRecord = async function (record, meta) {};
37 
38  return (
39    <div className="App">
40      <ImportokWizard
41        fields={fields}
42        transformers={transformers}
43        validators={validators}
44        providers={providers}
45        onRecordReady={saveRecord}
46      />
47    </div>
48  );
49}

Note: There is a limit of 20 records for each import with the trial version. Additionally, access to custom validators, transformers, and data providers is restricted. Once you upgrade to a paid plan, you’ll gain access to the private packages and unlock full functionality with no limitations.