Nothing's plumb meaningless

    @flatfile/react
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    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.

    Getting started with Embed

    First, create an Embed in the Flatfile dashboard. Next, install the dependency via npm:

    npm install @flatfile/react --save

    The FlatfileButton usage

    import { FlatfileButton } from '@flatfile/react'
    
    <FlatfileButton
      token={'YOUR_JWT'}
      onInit={({ batchId }) => console.log(`Flatfile importer is launched with batchId: ${batchId}`)}
      onComplete={async (payload) => {
        const SAMPLE_DATA = true
        console.log(JSON.stringify(await payload.data(SAMPLE_DATA), null, 4))
      }}
      onError={(err) => console.error(err)}
    />

    Getting started with Portal

    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@^0 --save

    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.

    Keywords

    none

    Install

    npm i @flatfile/react

    DownloadsWeekly Downloads

    12,708

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    97.9 kB

    Total Files

    31

    Last publish

    Collaborators

    • srmotter
    • driscollrp
    • abbywigdale
    • sarocu
    • ahollenbeck
    • flatfile-user
    • dboskovic
    • brentkulwicki
    • nate.ferrero
    • markpieszak
    • robbiet480
    • maksymblank
    • jaredwalters
    • bangarang
    • matusevich