csv2json-react

A React component that allows users to upload a CSV file, map the columns to predefined field names, review and correct the data, and finally import it as a JSON object.

Features

• CSV Upload: Allows the user to upload a CSV file.
• Field Mapping: Enables users to define field names and map them to CSV columns.
• Type Validation: Validates field data based on the provided types.
• Review and Correction: Users can review and correct the mapped data before importing.
• JSON Export: Converts the CSV data into a JSON object after review.

Installation

Install the package via npm:

npm i csv2json-react

or via yarn:

yarn add csv2json-react

Usage

Here's an example of how to use the component:

import React, { useState } from 'react';
import AniImport from 'csv2json-react';

const YourComponent = () => {
  const [modalIsOpen, setModalIsOpen] = useState(true);

  const handleComplete = (data) => {
    console.log("Imported JSON Data:", data);
  };

  return (
    <div>
      <AniImport 
        isOpen={modalIsOpen} 
        onComplete={handleComplete} 
      />
    </div>
  );
};

export default YourComponent;

Step-by-Step Process

1. Upload a CSV File

   • Users can select and upload a CSV file.
   • The component will parse the file and display the data for mapping and review.

2. Field Mapping and Type Definition

   • Users are prompted to define field names and map them to the CSV columns.
   • Each field can be assigned a specific data type (String, Number) to ensure the correct data format is captured.

3. Review and Correction

   • After the mapping is complete, the component will display the parsed data in a table.
   • Users can review the mapped data for any inconsistencies or errors.
   • The data is editable, allowing users to make corrections before finalizing the import.

4. Import Data

   • Once the user is satisfied with the reviewed data, they can click the Import button.
   • The component will trigger the onComplete callback and pass the final JSON object.

Props

• isOpen (Boolean, required): Controls whether the modal for file upload is open or closed.
• onComplete (Function, required): A callback function triggered when the CSV is successfully converted into JSON and the import is finalized. The function receives the resulting JSON object.

Example

import React, { useState } from 'react';
import AniImport from 'csv2json-react';

const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(true);

  const handleComplete = (data) => {
    console.log("Final JSON Data:", data);
  };

  return (
    <div>
      <h1>CSV to JSON Importer</h1>
      <AniImport 
        isOpen={modalIsOpen} 
        onComplete={handleComplete} 
      />
      <button onClick={() => setModalIsOpen(!modalIsOpen)}>
        {modalIsOpen ? 'Close Importer' : 'Open Importer'}
      </button>
    </div>
  );
};

export default App;

CSV File Structure

Ensure your CSV file is formatted correctly for seamless mapping and conversion.

Developed with ❤️ by Aniket Rane