Step 2: Embed the importer

Include the appropriate SDK from based on your JS framework.

React

bash

npm install @dolphincsv/react-csv-importer -s

Node

bash

npm install @dolphincsv/csv-importer-js -s

Javascript

Your html file

<script src="https://unpkg.com/@dolphincsv/csv-importer-js/dist/packages/index.1.0.11.umd.js" type="text/javascript"></script>

Then, embed the importer into your application

React

index.jsx

import { useState } from "react";
import { DolphinCSVImporter } from "@dolphincsv/react-csv-importer";

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Importer</button>

      <DolphinCSVImporter
        mode={'development'}
        clientId={"YOUR_CLIENT_ID"}
        templateKey={"YOUR_TEMPLATE_KEY"}
        open={open}
        columns={[
          {key: "name", label: "Name", type: "text", required: true},
          {key: "postcode", label: "postcode", type: "us_postcode", required: true},
          {key: "birthday", label: "Birthday", type: "date", required: true},
        ]}
        onSuccess={(importedData) => console.dir(importedData)}
        onClose={() => setOpen(false)}
        onError={(err) => console.log(err)}
      />
    </>
  )
}

Node

index.js

  import { DolphinCSVImporter } from "@dolphincsv/csv-importer-js";

  var importer = DolphinCSVImporter({
    mode: 'development',
    clientId: "YOUR_CLIENT_ID",
    templateKey: "YOUR_TEMPLATE_KEY",
    iFrameClassName: '',
    columns: [
      {key: "name", label: "Name", type: "text", required: true},
      {key: "postcode", label: "postcode", type: "us_postcode", required: true},
      {key: "birthday", label: "Birthday", type: "date", required: true},
    ],
    onSuccess: (importedData) => console.dir(importedData),
    onError: (err) => console.log(err),
    onClose: () => { /* do something */ },
  })

  importer.launch()

Javascript

index.html

<script type="text/javascript">
  var importer = DolphinCSV.DolphinCSVImporter({
    mode: 'development',
    clientId: "YOUR_CLIENT_ID",
    templateKey: "YOUR_TEMPLATE_KEY",
    iFrameClassName: '',
    columns: [
      {key: "name", label: "Name", type: "text", required: true},
      {key: "postcode", label: "postcode", type: "us_postcode", required: true},
      {key: "birthday", label: "Birthday", type: "date", required: true},
    ],
    onSuccess: (importedData) => console.dir(importedData),
    onError: (err) => console.log(err),
    onClose={() => { /* do something */ }},
  })

  importer.launch()
</script>

tip

If you anticipate needing to re-open the importer after a user finishes an import, make sure to set the open state to false in the onSuccess callback like so:

onSuccess={(importedData) => {
  setOpen(false)
  console.dir(importedData)
}}

Explanation of properties

Property	Description	Type
mode	Sets the importer mode. In development or demo mode, only the first 10 rows of data are sent back, but imports do not count towards usage quotas. In demo mode, we supply default template columns so you can try the product faster. Use production for production deployments.	'development' | 'production' | 'demo'
clientId	You can get your Client ID from your DolphinCSV Dashboard. Your Client ID is not a secret. You do not need to supply a clientId if you are running the importer in demo mode.	string
templateKey	Your template key determines which template the importer will use. You can find it in the template details page. You do not need to supply a templateKey if you are running the importer in demo mode.	string
columns	The columns in your template. See the Configuring Columns guide for more details. You do not need to supply the columns property if you are running the importer in demo mode.	Array of Columns
onSuccess	The callback function to receive the imported data. The data is represented as a list of objects, where the object keys correspond to the column keys.	(data: any) => void
onError	Error callback if an unexpected error happens	(error: string) => void
onClose	Optional callback if the user closes the importer unexpectedly. Required if using the React SDK.	() => void
open	React only property. Determines whether the importer is open or closed.	boolean
iFrameClassName (optional)	CSS class to attach to the iFrame for styling.	string