Skip to main content

Getting Started

Let's integrate the UseCSV Importer plugin with your React app.

Make sure you configured your importer before starting.


Using NPM

npm install @usecsv/react

Using YARN

yarn add @usecsv/react

Add the Importer

Adding the UseCSV component to your frontend will render a button that triggers the import modal when clicked.

Code example with default button

Check codesandbox example.

import UseCSV from "@usecsv/react";

const App = () => {
return (
<h1>Start importing your data</h1>
<UseCSV importerKey="your-importer-key" user={{ userId: "12345" }}>
Import Data

export default App;

The component contents will be used as the button text.

Usage Exmaple

Code example with custom render prop

Check codesandbox example.

More details can be found in render prop

import UseCSV from "@usecsv/react";

function App() {
const renderButton = (openModal) => {
return (
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
return (
<div className="App">
user={{ userId: 12345 }}
render={(openModal) => renderButton(openModal)}

export default App;
Usage example with render

Now your users can import data from within your app, the final step is to setup a webhook in your backend to receive imports. Let's goto the Webhook docs.