Data Import Wizard

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-data-import-wizard

pnpm add @docyrus/api-client @tanstack/react-query

When to Use

Reach for <DataImportWizard> (and the matching useDocyrusDataImportWizard hook) whenever you want to give end-users a fully-guided "upload XLSX → see results" flow against any Docyrus data source. The component is presentational — every prop is a state slice plus a callback — so the smart hook does the heavy lifting (file upload, analyse, auto-mapping, preview, import).

If you only need to import data programmatically, use the hook's imperative helpers (uploadAsync, analyseAsync, importAsync) and ignore the rendered wizard element.

Usage

'use client';

import { useDocyrusAuth } from '@docyrus/signin';

import { Button } from '@docyrus/ui/primitives/ui/button';
import { useDocyrusDataImportWizard } from '@docyrus/ui/hooks/use-docyrus-data-import-wizard';

export function ContactsImportButton() {
  const { client } = useDocyrusAuth();

  if (!client) return null;

  const { openWizard, wizard } = useDocyrusDataImportWizard({
    client,
    appSlug: 'crm',
    dataSourceSlug: 'contact',
    requiredFieldSlugs: ['email']
  });

  return (
    <>
      <Button onClick={openWizard}>Import contacts…</Button>
      {wizard}
    </>
  );
}

Wizard Steps

API Reference

<DataImportWizard>

The dumb component. Drive every prop from your own state — typically through useDocyrusDataImportWizard, which already wires every prop. Only reach for the component directly when you need a custom state machine (e.g. a server-component wrapper).

Components

Each step component is exported individually so consumers can rearrange or replace them in custom flows.

Helpers

Type Exports

Field-Type Awareness

Like useDocyrusDataGrid, every field type is handled automatically:

See Also

• useDocyrusDataImportWizard — smart hook that wires the wizard to a Docyrus data source in one call.
• useDocyrusFieldComponent — the registry that powers the preview-step value renderers.
• useDocyrusDataGrid — companion hook for displaying the imported records in a grid.