Skip to main content

React Quickstart

tip

Are you looking for a framework other than React? Check the Getting Started guides in the sidebar.

Installation​

To install the Dromo React SDK in your application, first install the NPM package dromo-uploader-react.

npm install dromo-uploader-react

Next, import the DromoUploader component.

import DromoUploader from "dromo-uploader-react"

Then, add a DromoUploader component to your app, replacing the licenseKey prop with your frontend license key, found in the Dromo dashboard.

<DromoUploader
  licenseKey="FRONTEND_API_KEY"
  fields={[
    {
      label: "Name",
      key: "name",
    },
    {
      label: "Email",
      key: "email_address",
    },
  ]}
  settings={{
    importIdentifier: "Contacts",
    developmentMode: true,
  }}
  user={{
    id: "1",
    name: "Jane Doe",
    email: "jane@dromo.io",
    companyId: "Dromo",
    companyName: "12345",
  }}
  onResults={(response, metadata) =>
    // Do something with the data here
    console.log(response, metadata)
  }
>
  Launch Dromo
</DromoUploader>

And that's it, you have a fully functional data importer in your app!

DromoUploader component reference​

The DromoUploader component accepts the following props.

  • licenseKeystringRequired

    Your Dromo front-end license key, which can be found in the Dromo dashboard

  • fieldsField[]Required

    An array of fields which comprise your import schema

  • settingsSettingsRequired

    Settings to change the behavior of the Dromo importer

  • userUserRequired

    Metadata about the end user to associate with the import

  • rowHooksRowHook[]

    An array of row hook functions

  • bulkRowHooksBulkRowHook[]

    An array of bulk row hook functions

  • columnHooksobject[]

    An array of column hook objects. Column hook objects have two entries:

  • stepHooksobject[]

    An array of step hook objects. Step hook objects have two entries:

    • type"UPLOAD_STEP" | "REVIEW_STEP" | "REVIEW_STEP_POST_HOOKS"
    • callbackStepHook

      A function matching the signature for the specified step hook type

  • beforeFinishBeforeFinishCallback

    A beforeFinish callback function called immediately before completing the import to check results

  • onResultsOnResultsCallback

    An onResults callback function called with the results after the user finishes the import

  • onCancel() => void

    Called if the user leaves the Dromo Uploader before completing the import

  • openboolean
    >= 2.0.9

    If provided, determines whether the Dromo importer modal should open. See usage note below.

open prop vs. children as open button​

There are two ways you can use the DromoUploader component.

You can provide the component with children nodes, in which case the children will be wrapped in a button that will open the importer.

<DromoUploader {...props}>Open importer</DromoUploader>

Alternatively, you may omit the children and use the open prop of the component to control whether the importer is opened or not.

<DromoUploader open={isImporterOpen} {...props} />

Usage with saved schemas​

You can use a Schema Studio-built schema with Dromo's React SDK by providing your schema's name to the DromoUploader component:

<DromoUploader
  licenseKey='YOUR_LICENSE_KEY'
  schemaId='YOUR_SCHEMA_ID'
  user={{ id: 'jimUser' }}
  developmentMode={false}
>
  Open Dromo
</DromoUploader>

Walkthrough video​

Want a more detailed walkthrough? Jeff will escort you step-by-step through the process.