React.js Papaparse Project to Parse & Convert JSON to CSV Using react-papaparse Library

App.jsx

// React.js Project to Convert JSON to CSV Using react-papaparse Library
import React, { useState } from 'react';
import { usePapaParse } from 'react-papaparse';
import { Form, Button, Container, Row, Col, Alert } from 'react-bootstrap';
import "bootstrap/dist/css/bootstrap.min.css"
export default function JsonToCSV() {
  const { jsonToCSV } = usePapaParse();
  const [jsonInput, setJsonInput] = useState('');
  const [error, setError] = useState('');

  const handleJsonToCSV = () => {
    try {
      const jsonData = JSON.parse(jsonInput);
      const results = jsonToCSV(jsonData);

      // Create a Blob and download it
      const blob = new Blob([results], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'converted.csv';
      link.click();

      // Clear errors
      setError('');
    } catch (err) {
      setError('Invalid JSON input. Please check your data.');
    }
  };

  return (
    <Container className="mt-4">
      <h1 className="text-center">JSON to CSV Converter</h1>
      <Row className="justify-content-center">
        <Col md={8}>
          <Form>
            <Form.Group controlId="jsonInput">
              <Form.Label>Paste your JSON here</Form.Label>
              <Form.Control
                as="textarea"
                rows={8}
                placeholder="Enter raw JSON data..."
                value={jsonInput}
                onChange={(e) => setJsonInput(e.target.value)}
              />
            </Form.Group>
            {error && <Alert variant="danger" className="mt-3">{error}</Alert>}
            <Button
              variant="primary"
              className="mt-3"
              onClick={handleJsonToCSV}
            >
              Convert to CSV and Download
            </Button>
          </Form>
        </Col>
      </Row>
    </Container>
  );
}

// React.js Project to Convert JSON to CSV Using react-papaparse Library

import React, { useState } from 'react';

import { usePapaParse } from 'react-papaparse';

import { Form, Button, Container, Row, Col, Alert } from 'react-bootstrap';

import "bootstrap/dist/css/bootstrap.min.css"

export default function JsonToCSV() {

const { jsonToCSV } = usePapaParse();

const [jsonInput, setJsonInput] = useState('');

const [error, setError] = useState('');

const handleJsonToCSV = () => {

try {

const jsonData = JSON.parse(jsonInput);

const results = jsonToCSV(jsonData);

// Create a Blob and download it

const blob = new Blob([results], { type: 'text/csv;charset=utf-8;' });

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = 'converted.csv';

link.click();

// Clear errors

setError('');

} catch (err) {

setError('Invalid JSON input. Please check your data.');

}

};

return (

<h1 className="text-center">JSON to CSV Converter</h1>

<Form>

<Form.Group controlId="jsonInput">

<Form.Label>Paste your JSON here</Form.Label>

<Form.Control

as="textarea"

rows={8}

placeholder="Enter raw JSON data..."

value={jsonInput}

onChange={(e) => setJsonInput(e.target.value)}

</Form.Group>

{error && <Alert variant="danger" className="mt-3">{error}</Alert>}

<Button

variant="primary"

className="mt-3"

onClick={handleJsonToCSV}

Convert to CSV and Download

</Button>

</Form>

</Col>

</Row>

</Container>

);

}

React.js Papaparse Project to Parse & Convert JSON to CSV Using react-papaparse Library

Comments

Leave a Reply Cancel reply

Archives