Hook-based Importer (useDataImporter)

Advanced

info

This feature is available for React only.

Concept

Description	useDataImporter is a hook-based alternative to the <DataImporter /> component. Use it when you want your own upload button or need to hide the importer until the user clicks it.

---

Return values

Property	Description
ref	Attach to a container element (<div ref={ref} />). Must be a callback ref, not an object ref.
open	Opens the importer UI. The container stays hidden until open() is called.
isReady	true when the license is verified and the importer is ready for user interaction.
isUploading	true while an upload is in progress.
error	Contains type and message when an error occurs. null when there is no error.
reload	Reloads this instance with a new session ID.

---

Basic example

import { useDataImporter } from "@ingestro/importer-react";

function ImportButton() {
  const { ref, open, isReady, isUploading, error } = useDataImporter({
    licenseKey: "Your License Key",
    settings: {
      identifier: "product-data",
      developerMode: true,
      columns: [
        { label: "Product ID", key: "product_id" },
        { label: "Article Name", key: "article_name" },
      ],
    },
    onUploadSuccess: () => analytics.track("file-upload-success"),
    onUploadError: ({ type, message }) => analytics.track("file-upload-error", { type, message }),
  });

  return (
    <>
      <div ref={ref} />
      <button onClick={open} disabled={!isReady || isUploading}>
        Upload file
      </button>
      {error ? <p>{error.message}</p> : null}
    </>
  );
}

---