@flatfile/react

The Flatfile Component - @flatfile/react

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

Important note: While the below info is a basic way to get up and running, we recommend reading the developer docs → https://flatfile.io/developers/react/getting-started

First, install the dependency via npm:

npm install @flatfile/react

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

The FlatfileButton usage

import { FlatfileButton } from '@flatfile/react'

FlatfileButton Props	Info	Example
settings - This is where you will pass your Flatfile settings/options.	**Required. ** object	settings={{ type: "Customers", fields: [ {key: "name", label: "Name"}, {key: "email", label: "Email"} ]}}
customer - Refers to the setCustomer function.	Required. object - CustomerObject	customer={{ usedId: "1234", companyId: "12", companyName: "ABC", email: "[e-mail]", name: "John Doe" }}
licenseKey - Your Flatfile license key can be found in your dashboard when you login here.	Required. string	licenseKey={'ah12-alksjs2738-shdkaj123'}
onCancel - An optional callback for handling a user cancelling.	Optional. function - callback	onCancel={() => { // do something }}
onInteractionEvent - An optional way to use registerInteractionEventCallback to receive user interaction events. By default, the onInteractionEvent function will be called every 5 seconds, as long as there is user activity inside of Flatfile Portal.	Optional. function	onInteractionEvent={({mousemove, mousedown, keydown}) => // do something}
onData- An optional way to use FlatfileResults to return a new Promise.	Optional. function	onData={async results => // do something}
onRecordChange- An optional way to use registerRecordHook when a record changes.	Optional. function	onRecordChange={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
onRecordInit- An optional way to use registerRecordHook on initialization.	Optional. function	onRecordInit={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
fieldHooks- An optional way to pass in one or more callback functions to use with registerFieldHook.	Optional. object function(s) - callback(s)	fieldHooks={ fieldName: (values) => { return // [IDataHookRecord, index][]}
render- An optional way to pass in your own elements to render inside the FlatfileButton Component.	Optional. function	render={ (FlatfileImporter, launch) => return ReactElement}
preload- An optional flag that can be set to false to delay loading the importer until the button is clicked. Useful in situations where there is more than one <FlatfileButton/> instance on a single page or minimizing page load size is important. Default is true.	Optional. boolean	preload={false}

Try our example in CodeSandbox.