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.
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: "john@doe.com",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.