Configure your Space in React
FlatfileProvider
is a comprehensive React component designed for integrating
Flatfile’s import capabilities into your application. It can be initialized
using either a publishableKey
or an accessToken
, providing flexibility
depending on your authentication flow. The component allows for extensive
customization of the embedded iFrame through styling parameters, ensuring that
the import modal matches your application’s aesthetics. It maintains the
configuration necessary for creating and managing Spaces, Workbooks, and
Documents within Flatfile. Additionally, FlatfileProvider
manages a
client-side listener to handle browser-based events, ensuring a seamless user
interaction with the import process.
Learn more about the
FlatfileProvider and see Common Configuration for all available configuration options.
Space
component from the @flatfile/react
package is utilized to define a
collaborative environment or workspace within Flatfile’s import system. It can
be configured to create a new space or to reuse an existing one by providing a
space ID.
config
: Sets up the configuration for a new space, including theming and
metadata.id
: An optional prop that, when provided, indicates the specific existing
space to be reused instead of creating a new one.accessToken
to the
FlatfileProvider
, then this is where you’ll add the id
of the Space you want
to re-use.
onSubmit
and a new onRecordHooks
helper can be added to the Workbook. A
Workbook object containing the sheets can be passed along in the config
.
onRecordHooks
takes an array of record hooks. Each one can take a slug for
manually setting each per sheet. Otherwise, if no slug is added, it will apply
the record hook to the corresponding sheet in the Workbook index.
Learn more about the Workbook component and Advanced Configuration for multi-sheet workbook configurations.
Sheet
component from the @flatfile/react
package integrates Flatfile’s
data import functionality into React applications. It simplifies configuring the
data import process and managing the lifecycle of data submission and record
handling.
config
: Defines the structure and settings of the data to be imported.onSubmit
: A callback function that is triggered upon successful data
submission.onRecordHook
: A function that allows for custom record manipulation during
the import process.submitSettings
: Customizes the behavior of the data submission process.Flatfile.DocumentConfig
as a param.
openPortal()
: Opens the iFrame. This will create the underlying Space,
Workbook and configure if necessary or open the Space provided.closePortal()
: Closes the iFrame.open
: current open statuslistener
: Current listenersetListener()
: manually sets the listener