Step 2: Embed the importer
Include the appropriate SDK from based on your JS framework.
- React
- Node
- Javascript
bash
npm install @dolphincsv/react-csv-importer -s
bash
npm install @dolphincsv/csv-importer-js -s
Your html file
<script src="https://unpkg.com/@dolphincsv/csv-importer-js@latest" type="text/javascript"></script>
Then, embed the importer into your application
- React
- Node
- Javascript
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)}
/>
</>
)
}
index.js
import { DolphinCSVImporter } from "@dolphincsv/csv-importer-js";
var importer = new DolphinCSVImporter({
mode: 'development',
clientId: "YOUR_CLIENT_ID",
templateKey: "YOUR_TEMPLATE_KEY",
iFrameClassName: '',
onSuccess: (importedData) => console.dir(importedData),
onError: (err) => console.log(err),
onClose: () => { /* do something */ },
})
importer.launch()
index.html
<script type="text/javascript">
var importer = new DolphinCSV.DolphinCSVImporter({
mode: 'development',
clientId: "YOUR_CLIENT_ID",
templateKey: "YOUR_TEMPLATE_KEY",
iFrameClassName: '',
onSuccess: function (importedData) { console.dir(importedData) },
onError: function (err) { console.log(err) },
onClose: function() { /* 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 | Use 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 |
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 |
theme | Configures the importer theme. See the Theming guide for more details. | object |