​

Sheet Component Overview

​

Main Props

• config: An object that defines the sheet’s configuration, including its name, slug, and fields.
  • name: The human-readable name of the sheet.
  • slug: A unique identifier for the sheet, used for referencing in the import process.
  • fields: An array of objects defining the structure and constraints of each field in the sheet.
• onSubmit: A callback function that is invoked when the sheet’s data is successfully submitted. It receives the submitted data as an argument.
• onRecordHook: A function that allows for custom manipulation of each record during the import process. It is called for each record and can modify, validate, or enrich the record data.
• submitSettings: An object for customizing the behavior of the sheet’s submission process, such as handling errors or setting a completion message.

const App = () => {
  const sheetConfig: Flatfile.SheetConfig = {
    name: "Users",
    slug: "users",
    fields: [
      { key: "name", label: "Name", type: "string" },
      { key: "email", label: "Email", type: "string" },
    ],
  };
  const handleSubmit = (data) => {
    console.log("Submitted data:", data);
  };
  const handleRecord = (record) => {
    record.set("name", record.get("name").toUpperCase());
  };
  return (
    <Sheet
      config={sheetConfig}
      onSubmit={handleSubmit}
      onRecordHook={handleRecord}
    />
  );
};