Loki Import Widget

Import widget for the Loki platform.

Add to your React app and enable customers to upload a CSV and have it seamlessly transformed into the data model of your choice.

Installation

npm install @skald-labs/import-widget

Usage

import { useState } from 'react';
import { ImportWidget } from '@skald-labs/import-widget';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Import Data
      </button>

      <ImportWidget
        isOpen={isOpen}
        organizationUuid="YOUR_ORGANIZATION_UUID"
        dataModelUuid="YOUR_DATA_MODEL_UUID"
        token="YOUR_JWT_TOKEN_HERE"
        // set inline=true if you want to have the widget embedded into your app 
        // where it's placed whether than as a modal over the rest of your UI
        inline={false} 
        onSuccess={() => {
          console.log('Import successful');
          setIsOpen(false);
        }}
        onError={(error) => {
          console.error('Import failed:', error);
        }}
        onClose={() => setIsOpen(false)}
      />
    </>
  );
}

You should set up some state handling to control whether the widget is open or not and pass that as the isOpen property of the widget.

You can get your organization UUID, data model UUID, and signing secret to generate JWTs from your Loki dashboard.