Skip to main content

Options

Required

importerKey: string

This can be found in the admin panel.

importerKey = "importer-key";

Optional

user: json object

Contains details of the user, so that they can be identified when your backend receives a webhook.

user={{ userId: "12345" }}

metadata: json object

If you have additional data which you want to associate with the import but isn't related to the user, you can use the metadata prop. This will also be included in the webhook your backend receives.

metadata={{ anotherId: "123" }}

onData: Function

onData: (data: {
uploadId: number;
fileName: string;
rows: Record<string, string | number | undefiend>[];
user?: {
userId: string;
};
metadata?: Record<string, string | number>;
}) => void | Promise<{ errors?: { row: Record<string, string | number | undefined>; error: string }[] } | void>

If you prefer to handle your data locally (and disable uploading csv data to UseCSV), you can set the onData callback option and the data will not be uploaded to UseCSV and sent to your callback function instead when the user finishes importing the CSV.

// example data
{
uploadId: 334,
fileName: "data.csv",
user: { userId: "12345" },
metadata: { anotherId: "1" },
rows:[
{
first_name:"Mari",
email:"Mari@gmail.com"
},
{
first_name:"John",
email:"John@gmail.com"
}
]
}

Return errors:

  • You can retrun from the onData function an array of rows with errors and the user will be provided with a downloadable .csv file containing the rows and thier error.
// example of onData error handeling
onData: async (data) => {
/*
* do your validation
*/

// if no errors
return;

// if you found rows with errors, save the correct rows, and retrun an array of rows with errors
return Promise.resolve({
errors: [
{
row: {
first_name: "Mari",
email: "Mari@gmail.com",
},
error: "email already exists",
},
],
});
};

render: function component

render is a React funtion component with an openModal argument, allowing you to replace the default UseCSV button with your custom component. The openModal argument is a function that triggers the import modal when clicked.

render={(openModal) => <button onClick={openModal}>Import Data</button>}
Usage example with render and callback
import UseCSV from "@usecsv/react";

function App() {
const renderButton = (openModal) => {
return (
<button
onClick={openModal}
style={{
width: "170px",
height: "70px",
color: "#fff",
backgroundColor: "#027ad6",
boxShadow: "0 32px 64px rgba(0,0,0,0.07);",
font: "700 24px sans-serif",
textAlign: "center",
border: "none",
borderRadius: "3px",
}}
>
Import Data
</button>
);
};
return (
<div className="App">
<UseCSV
importerKey="your-importer-key"
user={{ userId: 12345 }}
render={(openModal) => renderButton(openModal)}
onData={(data) => {
console.log("uploadId:", data.uploadId);
console.log("rows:", data.rows);
}}
/>
</div>
);
}

export default App;
Usage example with render