Everything you need, nothing you don't

<XLorkClient
  licenseKey="XXXX-XXXX-XXXX-XXXX"
  user={{
    email: "docs-react@xlork.com",
    name: "Free user",
  }}
  settings={{
    columns: [
      {
        label: "Address",
        key: "address",
        type: "text",
        validators: {
          requiredWithout: ["Latitude", "Longitude"],
          error: "Required if latitude and longitude not available."
        }
      },
      { label: "Latitude",  key: "latitude",  type: "text" },
      { label: "Longitude", key: "longitude" },
      { label: "Country",   key: "country" },
      {
        label: "Order Type",
        key: "type",
        type: "dropdown",
        options: ["home", "office"],
      },
      {
        label: "Email",
        key: "email",
        validators: { validate: "required" },
      },
      { label: "Name", key: "name" },
      {
        label: "Duration",
        key: "stop_duration",
        validators: {
          regexMatches: "^null|^$|\\d{1,2}$",
          error: "Only numbers, max 2 digits."
        }
      },
      {
        label: "Stop date",
        key: "stop_date",
        type: "date",
        dateFormat: "DD/MM/YYYY"
      }
    ],
    title: "Orders",
    sampleUrl: "sample.xlsx",
    maxRecords: 2000,
    allowInvalidSubmit: true,
    language: "en",
    history: true,
    theme: "SKYBLUE",
    development: true,
    display: "inline",
    header: false,
    social: false,
  }}
  onComplete={async (response) => {
    console.log(response);
  }}
  onCancel={() => {
    console.log("Import cancelled");
  }}
  loadOnDemand={(init) => (
    <button onClick={() => init()}>
      Upload
    </button>
  )}
/>

{
  label: "Email",        // Display name in the mapper
  key: "email",          // Key in the output data
  type: "email",         // Column type (see below)
  validators: {          // Optional validation rules
    validate: "required"
  }
}

settings={{
  theme: "SKYBLUE",
  // Available: GRAPFRUIT | FLATRED | FLATORANGE | AQUA | MINT | LIME
  //   FLATMINT | BLUEJEANS | SKYBLUE | GRASS | SUNFLOWER
  //   BITTERSWEET | PINKROSE | LIGHTPINK | DARKGRAY | FLATGRAY
  // ...other settings
}}

// onComplete — fires when user finishes import
onComplete={async (response) => {
  // response contains the imported rows
  await fetch("/api/import", {
    method: "POST",
    body: JSON.stringify(response),
  });
}}

// onCancel — fires when user closes without submitting
onCancel={() => {
  console.log("User cancelled the import");
}}

// loadOnDemand — render your own trigger button
loadOnDemand={(init) => (
  <button onClick={() => init()}>
    Open Importer
  </button>
)}