Getting started with Flatfile in React

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

Install and import

This gives you access to the

component, which has the same basic functionality as our Adapter.

This brings the

component into your project.

Configure your settings and usage

To launch, the

component must have , and as properties.

Basic Usage

Here is a list of all the properties that are configurable with the

component. Visit out settings guide to learn about each in greater depth.

• settings
  - Required - 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 - Pass in 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 access our product, a license key is required. The license key can be found 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 you to return a new Promise to handle the Flatfile results when returned.
• onRecordChange
  - This provides access to Flatfile's record hooks when a record changes.
• onRecordInit
  - This provides access to Flatfile's record hooks when a record initializes.
• fieldHooks
  - This allows you to pass in one or more field hooks as separate callback functions.
• 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