React

React ≤18 passes objects as attributes and has no declarative custom-event binding; even React 19 still needs a ref for events. Use the published wrapper — it assigns object props and bridges DOM events to callbacks.

npm install @capitality-io/mildport-react @capitality-io/mildport-widget react

import { ImportSuite, type AppliedDetail } from '@capitality-io/mildport-react';

const targets = [
  {
    id: 'contact',
    label: 'Contact',
    fields: [
      { key: 'person.firstName', label: 'First name' },
      { key: 'person.email', label: 'Email', required: true, columnType: 'email' },
    ],
  },
];

export function ImportButton() {
  return (
    <ImportSuite
      apiBaseUrl="https://imports.your-infra.example"
      licenseKey={signedLicenseKey}
      targets={targets}
      onApplied={(d: AppliedDetail) => console.log('applied', d.recordId, d.rowCount)}
      onError={d => console.error(d.code, d.message)}
    />
  );
}

The wrapper registers <mildport-import> on first mount (idempotent) — no manual defineImportSuiteElement() call.

Browser-apply mode

When the host writes rows itself (no apply webhook):

<ImportSuite
  apiBaseUrl="…"
  licenseKey={key}
  targets={targets}
  applyMode="browser"
  onResults={(rows, mapping) => saveToMyBackend(rows, mapping)}
/>

Props worth knowing

Prop	Type	Notes
apiBaseUrl	string	Engine origin
licenseKey	string	Per-tenant signed key
targets	TargetCatalog	Record types + fields (or use a catalog)
applyMode	'webhook' | 'browser'	Default webhook
onApplied	(detail) => void	Fired when apply succeeds
onResults	(rows, mapping) => void	Browser-apply delivery
onError	(detail) => void	Typed error payload
onCancel	(detail) => void	User dismissed the wizard

Types (AppliedDetail, TargetCatalog, …) re-export from the widget — import them from @capitality-io/mildport-react in one place.

Siguiente: Configurar · Eventos · todos los frameworks