> ## Documentation Index
> Fetch the complete documentation index at: https://developer.dromo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React Quickstart

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

## Step By Step Guide

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

<Steps>
  <Step title="Installation">
    Install the Dromo React SDK NPM package:

    <CodeGroup>
      ```bash Terminal theme={null}
      npm install dromo-uploader-react
      ```
    </CodeGroup>

    Next, import the `DromoUploader` component in your file:

    <CodeGroup>
      ```javascript JavaScript theme={null}
      import DromoUploader from "dromo-uploader-react";
      ```
    </CodeGroup>
  </Step>

  <Step title="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.

    <CodeGroup>
      ```jsx "JSX (Basic Usage)" theme={null}
      <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>
      ```
    </CodeGroup>

    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](/reference/react-dromo-uploader).
  </Step>

  <Step title="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.

    <CodeGroup>
      ```jsx "JSX (Children Trigger)" theme={null}
      <DromoUploader
        licenseKey="YOUR_FRONTEND_LICENSE_KEY" // Add other essential props
        onResults={(data, metadata) => console.log(data)} // Example callback
      >
        <button>Upload Data</button>
      </DromoUploader>
      ```
    </CodeGroup>

    #### 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).

    <CodeGroup>
      ```jsx "JSX (Open Prop)" theme={null}
      // 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>
      ```
    </CodeGroup>

    See more about the `open` prop in the [`<DromoUploader />` Component Props Reference](/reference/react-dromo-uploader).
  </Step>
</Steps>

## 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.

<CodeGroup>
  ```jsx "JSX (Saved Schema)" theme={null}
  <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>
  ```
</CodeGroup>

Learn more about [creating schemas in the Schema Studio](/guides/schema-builder).

## Walkthrough Video[​](#walkthrough-video "Direct link to Walkthrough video")

<iframe className="w-full aspect-video rounded-xl" src="https://player.vimeo.com/video/722765552" title="Walkthrough video" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

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