React CSV Handler is a simple, reusable React component designed for handling CSV files in web applications. It allows users to upload, parse, edit, and display CSV data, specifically focusing on address and amount fields. The component supports drag-and-drop file upload, pasting from clipboard, editing individual rows, and calculating the total amount.
- CSV File Upload: Users can upload CSV files via drag-and-drop or by clicking to upload.
- Clipboard Data Parsing: Users can paste data directly from the clipboard.
- Editable Rows: Supports inline editing of address and amount fields in the CSV.
- Total Amount Calculation: Calculates and displays the total amount from the CSV data.
- Customizability: The component accepts various props for customization, such as decimal precision for amounts.
To install the React CSV Handler component in your project, run:
npm install @poolzfinance/csvhandler
yarn add @poolzfinance/csvhandler
pnpm add @poolzfinance/csvhandler
Import and use the CSVHandler
component in your React application:
import CSVHandler from '@poolzfinance/csvhandler';
const App = () => {
// State to store the rows from the CSV file
const [rows, setRows] = useState([]);
return (
<CSVHandler
rows={rows} // Pass the rows data to the CSVHandler
setRows={setRows} // Pass the function to update the rows
tokenDecimal={2} // Set the decimal precision for amount fields
isDeletable={true} // Enable the option to delete rows
isEditable={true} // Enable the option to edit rows
/>
);
};
export default App;
To view and interact with the CSVHandler
component in a Storybook environment, run the command:
pnpm run storybook