Quickstart - React

Overview

We've made it really simple for your the get started with Flatfile with our new Flatfile Component. Here's what you'll need to know to get started.

Getting your license key

Login to your account to access the flatfile dashboard. Under the Portal section, you'll see a Setup option that will walk you through how to obtain your license key.

Install and import

npm install @flatfile/react

This will give you access to the <FlatfileButton /> component as well as the same basic functionality as our Adapter.

import { FlatfileButton } from '@flatfile/react'

This will bring the FlatfileButton component into your project.

Configure your settings and usage

At a minimum, the FlatfileButton component must have settings , customer and licenseKey as properties.

Basic Usage

<FlatfileButton
licenseKey="Your License Key"
customer={{
companyId: "ABC-123",
companyName: "ABC Corp.",
email: "john@abc123.com",
name: "John Smith",
userId: "12345"
}}
settings={{
type: "Contact",
fields: [
{ label: "Full Name", key: "name" },
{ label: "Email", key: "email" }
]
}}
onData={async (results) => {
// Do something with the data here
return "Done!";
}}
>
Import Contacts
</FlatfileButton>

Here is a list of all the props that come along with the <FlatfileButton> component/

  • settings - Required - This is where you would pass in an object containing the import type and your fields . For a list of the other optional settings, check out our options documentation here.
  • customer - Required - This is an object that identifies the customer uploading the file. This refers the the setCustomer() function on our SDK, and the same object should be passed in here.
  • licenseKey - Required - In order to work with our product, you have to pass in the license key. You can find your license key in your dashboard by logging in here.
  • onCancel - This allows you to pass in a callback function that will run if the user cancels out of the import.
  • onData - This allows for you to return a new Promise to handle the Flatfile results with.
  • onRecordChange - This gives access to Flatfile's record hooks when a record changes.
  • onRecordInit - This gives access to Flatfile's record hooks when a record initializes.
  • fieldHooks - This allows you to pass in a field hooks as one or more callback functions in the prop.
  • render - The render property allows for you to pass in your own components or buttons to use in place of the standard Flatfile UI element.

Full Usage

import React from "react";
import { FlatfileButton } from "@flatfile/react";
export const MyFakeUI = () => {
return (
<div>
<h1>Import with Flatfile</h1>
<FlatfileButton
settings={{
type: "test import",
fields: [
{ label: "name", key: "name" },
{ label: "Email", key: "email" }
]
}}
licenseKey={"Your license key here"}
customer={{
companyId: "ABC-123",
companyName: "ABC Corp.",
email: "john@abc123.com",
name: "John Smith",
userId: "12345"
}}
onData={async (results) => {
// do something with the results
console.log(results);
}}
onRecordChange={(record) => {
return { name: { value: record.name + " from change" } };
}}
onRecordInit={(record) => {
return { name: { value: record.name + " from init" } };
}}
fieldHooks={{
email: (values) => {
return values.map(([item, index]) => [
{ value: item + ".au" },
index
]);
}
}}
onCancel={() => {
console.log("cancel");
}}
render={(importer, launch) => {
return <button onClick={launch}>Updload file</button>;
}}
/>
</div>
);
};

Try our example in CodesandBox.