@ivandt/importer-react

React wrapper for the @ivandt/importer web component.

Installation

npm install @ivandt/importer @ivandt/importer-react

Usage

Basic Example

import { IvtImporter } from '@ivandt/importer-react';
import type { IvtSchema } from '@ivandt/importer';

const schema: IvtSchema = {
  title: 'Customer Import',
  fields: [
    {
      key: 'name',
      label: 'Full Name',
      type: 'text',
      validators: [{ type: 'required' }]
    },
    {
      key: 'email',
      label: 'Email',
      type: 'text',
      validators: [{ type: 'email' }]
    }
  ]
};

function App() {
  return (
    <div style={{ height: '600px' }}>
      <IvtImporter schema={schema} />
    </div>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | schema | IvtSchema | Yes | The schema configuration for your importer | | className | string | No | CSS class name | | style | React.CSSProperties | No | Inline styles |

Next.js Dynamic Import

For code splitting in Next.js:

'use client';

import dynamic from 'next/dynamic';
import type { IvtImporterProps } from '@ivandt/importer-react';

const IvtImporter = dynamic<IvtImporterProps>(
    () => import('@ivandt/importer-react'),
    {
      ssr: false,
      loading: () => <div>Loading ....</div>,
    },
);

export default function ImportPage() {
  const schema: IvtSchema = { /* ... */ };
  return <IvtImporter schema={schema} />;
}

TypeScript

Import types from @ivandt/importer:

import type { IvtSchema } from '@ivandt/importer';

For full Importer documentation, see the Ivandt.

License

Proprietary - See LICENSE file