Skip to main content

Step 2: Embed the importer

Include the appropriate SDK from based on your JS framework.

bash

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

Then, embed the importer into your application

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}
onSuccess={(importedData) => console.dir(importedData)}
onClose={() => setOpen(false)}
onError={(err) => console.log(err)}
/>
</>
)
}

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

PropertyDescriptionType
modeSets 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'
clientIdYou 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
templateKeyYour 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
columnsUse this to override the template columns in the importer. This will fully replace whatever columns you have set-up for your template. See the Overriding Columns guide for more details. This property has no effect if you are running the importer in demo mode.Array of Columns
onSuccessThe 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
onErrorError callback if an unexpected error happens(error: string) => void
onCloseOptional callback if the user closes the importer unexpectedly. Required if using the React SDK.() => void
openReact only property. Determines whether the importer is open or closed.boolean
iFrameClassName (optional)CSS class to attach to the iFrame for styling.string
themeConfigures the importer theme. See the Theming guide for more details.object