Quickstart - React

Overview

React is one of the most loved tools for managing UI due to its component structure and simple reuse of these components when importing them into the project. Flatfile remains true to this simplicity and function when utilized with your existing React application. Let's get you set up!

Getting your license key

Your first step to setting up Flatfile with React is to obtain your Flatfile License Key. You can find the key available for your use by navigating to the Licenses option under your Account settings on flatfile.io.

AccountMenu

Setting up flatfile.io in a React Component

When getting started with Flatfile, there are a few initial settings we will need to configure. We will discuss these in this section.

Importing Flatfile

Once you have your license key, we will want to make sure your component is bringing Flatfile into the page. Much like React and ReactDOM, we will be importing Flatfile at the beginning of the file.

The import statement for Flatfile should look like this:

import FlatfileImporter from "flatfile-csv-importer";

Setting up the component

There are three things that Flatfile needs to have defined for it to work within your page.

  • A way to start the flatfile.io application
  • Where to send your data
  • What your data format is

Starting flatfile.io

Within your React application, we will need to start the importer. The most common method is to allow your users to do this by rendering a button. This button, when clicked, will launch the importer. A working example of this can be found below:

render() {
return (
<div className="App">
<input
type="button"
id="launch"
value="Launch Importer"
onClick={this.launch}
/>
</div>
);
}

The launch function: tell Flatfile where to send your data

Once a user has interacted with flatfile.io, we need to configure and set parameters to define where to send the data. This can be done using a launch function (see below for a working example), which will start a new instance of the importer (we'll get to this in the next section). The importer will then allow the user to modify the data. Once data is modified, flatfile.io will return JSON to you, and your parameters will define where to send that data.

launch() {
this.importer
.requestDataFromUser()
.then(results => {
// Tell us what you want to happen to this data
})
.catch(function(error) {
console.info(error || "window close");
});
}

The importer function: product key & defining how your data is formatted

The final piece to your Flatfile integration is the importer function. This function requires two crucial pieces of information. First, you will need your Flatfile license key. Second, you will need to configure your data AKA fields. A working example of this function can be found below. You can find more information about fields here.

this.importer = new FlatfileImporter(
"YOUR KEY GOES HERE",
{
fields: [
{
key: "name",
//for other optional keys, visit the fields section
},
{
key: "email"
}
]
}
);

Interested in more details and want to see a working example? Visit our CodeSandbox React example here.