react-csv

import React from 'react'; import { CSVLink, CSVDownload } from 'react-csv'; const csvData = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "ah@smthing.co.com"], ["Raed", "Labes", "rl@smthing.co.com"], ["Yezzi", "Min l3b", "ymin@cocococo.com"] ]; function CsvExportComponent() { return ( <div> <h2>Download CSV Examples</h2> <p>Click the link to download the CSV:</p> <CSVLink data={csvData} filename="my-data.csv">Download me as a link</CSVLink> <br /><br /> <p>Or trigger an immediate download (e.g., on page load, or a button click handler):</p> <button onClick={() => alert('CSV will download shortly (check browser downloads)')}> Initiate direct download (check console for real usage) </button> {/* This component will trigger a download immediately on render if not controlled */} {/* For a real use case, CSVDownload would be conditionally rendered or part of a click handler */} {/* <CSVDownload data={csvData} target="_blank" filename="my-direct-download.csv" /> */} </div> ); } export default CsvExportComponent;