@ivandt/importer-react

@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