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

Basic example

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.