Build a React.js CSV Editor & Data Importer in Browser Using csv-import-react Library in JSX

App.jsx

import { CSVImporter } from "csv-import-react";
import { useState } from "react";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open CSV Importer</button>

      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        darkMode={true}
        onComplete={(data) => console.log(data)}
        template={{
          columns: [
            {
              name: "First Name",
              key: "first_name",
              required: true,
              description: "The first name of the user",
              suggested_mappings: ["First", "Name"],
            },
            {
              name: "Age",
              data_type: "number",
            },
          ],
        }}
      />
    </>
  );
}

export default MyComponent

import { CSVImporter } from "csv-import-react";

import { useState } from "react";

function MyComponent() {

const [isOpen, setIsOpen] = useState(false);

return (

<button onClick={() => setIsOpen(true)}>Open CSV Importer</button>

<CSVImporter

modalIsOpen={isOpen}

modalOnCloseTriggered={() => setIsOpen(false)}

darkMode={true}

onComplete={(data) => console.log(data)}

template={{

columns: [

{

name: "First Name",

key: "first_name",

required: true,

description: "The first name of the user",

suggested_mappings: ["First", "Name"],

{

name: "Age",

data_type: "number",

}}

</>

);

}

export default MyComponent

Build a React.js CSV Editor & Data Importer in Browser Using csv-import-react Library in JSX

Comments

Leave a Reply Cancel reply

Archives