/react-adapter

React Adapter

Primary LanguageTypeScript

The Flatfile Component - @flatfile/react

NOTE: this component can only be used with Flatfile Portal 2.0. If you are trying to set up Flatfile Portal 3.0, please visit the Portal 3.0 docs here.

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: "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.