Declarative CSV parser for react
npm install react-parse-csv- Superfast CSV parser (uses papaparse internally).
- Validate your data using zod
- Declarative and automatic. Simply call parse() the rest is automatic.
- Completely headless. Define your own styles!
#### yarn
``
yarn add react-parse-csv papaparse zod
#### npm
`
npm install react-parse-csv papaparse zod
tsx
import {useCsvParser, zodResolver} from "react-parse-csv";
import React, { useCallback } from "react";
import {FormEventHandler} from "react";
import { z } from "zod";// Define a schema where each row should validate against:
const schema = z.object({
name: z.string().min(1),
address: z.string().min(1),
})
const MyComponent: React:FC = () => {
// Initialize hook.
const {data, errors, isValid, parse} = useCsvParser({resolver: zodResolver(schema)})
// Simple filechange handler:
const handleFileChange:FormEventHandler = useCallback((event) => {
parse(event.currentTarget.files[0])
}, [parse])
return (<>
{/ All rows were valid: /}
{ isValid && (
{ data.map(({name, address}, index) => (
{ name }
{ address }
) }
) } {/ Some rows were invalid: /}
{ !isValid && (
{ errors.map(({line, column, message, value}, index) => (
{ line }
{ column }
{ message }
{ value }
) }
) }
)
}``