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:

``bash
npm i csv2json-react
`

or via yarn:

`bash
yarn add csv2json-react
`

Usage

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

`jsx
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 (


export default YourComponent;
`

$3

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.

$3

- 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.

$3

`jsx
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 (


export default App;
``

$3

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

Developed with ❤️ by Aniket Rane