React Quickstart

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

Step By Step Guide

This guide will walk you through integrating the Dromo Uploader into your React application.

Installation

Install the Dromo React SDK NPM package:

npm install dromo-uploader-react

Next, import the DromoUploader component in your file:

import DromoUploader from "dromo-uploader-react";

Basic Usage

Add the <DromoUploader /> component to your app. You’ll need to provide your licenseKey and configure fields, settings, user props, and an onResults callback.

<DromoUploader
  licenseKey="YOUR_FRONTEND_LICENSE_KEY" // Get this from the Dromo dashboard
  fields={[
    { label: "Name", key: "name" },
    { label: "Email", key: "email_address" },
  ]}
  settings={{
    importIdentifier: "ContactsUpload",
    developmentMode: true,
  }}
  user={{
    id: "user_123",
    name: "Jane Doe",
    email: "jane@example.com",
  }}
  onResults={(response, metadata) => {
    console.log("Imported Data:", response);
    console.log("Import Metadata:", metadata);
    // Process the data here
  }}
>
  Launch Dromo Importer
</DromoUploader>

This will render a button that says “Launch Dromo Importer”. Clicking it will open the Dromo modal. For a full list of props and detailed explanations, see the <DromoUploader /> Component Props Reference.

Opening the Uploader

There are two primary ways to control when the Dromo modal opens:

1. Using Children as a Trigger

If you provide children to the <DromoUploader /> component (like the “Launch Dromo Importer” button in the example above), these children will be rendered, and clicking them will open the Dromo modal.

<DromoUploader
  licenseKey="YOUR_FRONTEND_LICENSE_KEY" // Add other essential props
  onResults={(data, metadata) => console.log(data)} // Example callback
>
  <button>Upload Data</button>
</DromoUploader>

2. Using the `open` Prop (v2.0.9+)

Alternatively, you can omit children and control the modal’s visibility programmatically using the open prop (boolean).

// In your component state
// const [isImporterOpen, setIsImporterOpen] = useState(false);

<DromoUploader
  licenseKey="YOUR_FRONTEND_LICENSE_KEY" // Add other essential props
  open={isImporterOpen} // Control with your component's state
  onCancel={() => setIsImporterOpen(false)} // Recommended to handle modal close
  onResults={(data, metadata) => console.log(data)} // Example callback
/>
// <button onClick={() => setIsImporterOpen(true)}>Open Programmatic Uploader</button>

See more about the open prop in the <DromoUploader /> Component Props Reference.

Using a Saved Schema

You can use a schema created in Dromo’s Schema Studio by providing its ID via the schemaId prop. This simplifies the props you need to pass, as fields, most settings, and hooks will be loaded from your saved schema.

<DromoUploader
  licenseKey="YOUR_LICENSE_KEY"
  schemaId="YOUR_SCHEMA_ID_FROM_DASHBOARD"
  user={{ id: "user_123" }}
  // Optionally override importIdentifier or developmentMode from saved schema:
  // settings={{ importIdentifier: "OverrideName", developmentMode: false }}
  onResults={(response, metadata) => {
    console.log("Data with saved schema:", response);
  }}
>
  Upload with Saved Schema
</DromoUploader>

Learn more about creating schemas in the Schema Studio.

Walkthrough Video

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

Getting Started

Guides

Reference

FAQ & Changelog

Step By Step Guide

1. Using Children as a Trigger

2. Using the `open` Prop (v2.0.9+)

Using a Saved Schema

Walkthrough Video

​Step By Step Guide

​1. Using Children as a Trigger

​2. Using the open Prop (v2.0.9+)

​Using a Saved Schema

​Walkthrough Video​

Step By Step Guide

1. Using Children as a Trigger

2. Using the `open` Prop (v2.0.9+)

Using a Saved Schema

Walkthrough Video