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, just install the NPM package dromo-uploader-react.

npm install dromo-uploader-react

Usage

Import the DromoUploader component.

import DromoUploader from "dromo-uploader-react"

Then, add a DromoUploader component to your app. 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.

The DromoUploader component

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} />

Basic example

Want to use Schema Studio to create a schema?

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'
schemaName='YOUR_SCHEMA_NAME'
user={{ id: 'jimUser' }}
developmentMode={false}
>
Open Dromo
</DromoUploader>

To use the example below, replace "FRONTEND_API_KEY" with your frontend license key from 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>

Walkthrough video

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