> ## Documentation Index
> Fetch the complete documentation index at: https://fuse-docs.swovo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React CSV Importer

> How to implement a React CSV Importer

Below is some sample React code. Be sure to insert your own Organization's API key and an Importer ID from your account. They can be found on the [Importers](https://fuse.flatirons.com/account/importers) page.

> **Note for Next.js users:** This code can be used for Next.js versions lower than 14. For Next.js versions 14 and 15, add `"use client"` to the first line of the file.

```typescript theme={null}
import FuseImporter from "fuse-importer";
import React from "react";

const App = () => {
  const showImporter = () => {
    const importer = new FuseImporter();

    importer.getSessionToken = ... // see https://fuse-docs.flatirons.com/getting-started/sessions


    importer.onSubmit = async (records) => {
      return {
        message: "Data imported successfully",
        errors: {}
      };
    };

    importer.onValidateRecord = async (record) => {
      return { errors: {}, warnings: {} };
    };

    importer.show();
  };

  return (
    <>
      <button onClick={showImporter}>Show Importer</button>
    </>
  );
};

export default App;

```