DEV Community

ZeeshanAli-0704
ZeeshanAli-0704

Posted on

React -CSV-Reader

follow: https://www.npmjs.com/package/react-csv-reader

import React from "react";
import ReactDOM from "react-dom";
import CSVReader from "react-csv-reader";
import "./styles.css";

const handleForce = (data, fileInfo) => console.log(data, fileInfo);

const papaparseOptions = {
  header: true,
  dynamicTyping: true,
  skipEmptyLines: true,
  transformHeader: (header) => header.toLowerCase().replace(/\W/g, "_")
};

const reader = (
  <div className="container">
    <CSVReader
      cssClass="csv-reader-input"
      label="Select CSV with secret Death Star statistics"
      onFileLoaded={handleForce}
      onError={() => {
        console.log("error");
      }}
      parserOptions={papaparseOptions}
      inputId="ObiWan"
      inputName="ObiWan"
      inputStyle={{ color: "red" }}
    />
    <p>and then open the console</p>
  </div>
);

ReactDOM.render(reader, document.getElementById("root"));

Enter fullscreen mode Exit fullscreen mode

Top comments (0)