react-csv-reader

react-csv-reader is a small, focused React component that wraps the browser’s native file input and PapaParse to give developers instant CSV-to-JSON parsing in the browser. Instead of hand-wiring a FileReader, listening for load events, and calling PapaParse yourself, you drop in a single <CSVReader /> component, pass an onFileLoaded callback, and receive parsed rows (or objects, when PapaParse’s header option is set) along with file metadata.

Built in TypeScript with full type definitions, the component exposes CSS class hooks, custom labels, strict MIME-type checking, and pass-through PapaParse configuration, making it straightforward to theme and validate CSV uploads without leaving React’s component model.

What You Get

• A drop-in <CSVReader /> component with TypeScript types for props, file info, and parsed data
• Automatic FileReader + PapaParse wiring so you only handle the parsed result
• Configurable CSS class hooks for the wrapper, input, and label elements for easy theming
• Optional strict mode that rejects files whose MIME type doesn’t match the accept list
• Full pass-through of PapaParse’s parserOptions (headers, dynamic typing, custom transforms, etc.)

Common Use Cases

• Importing bulk data (contacts, inventory, transactions) from a user-supplied CSV into a React admin dashboard
• Letting non-technical users upload spreadsheet exports for one-off data migrations
• Building a CSV-to-JSON preview step in an onboarding or import wizard
• Validating and normalizing headers with PapaParse’s transformHeader before saving parsed rows to a backend

Under The Hood

Architecture The entire component lives in a single file, src/index.tsx: a React.forwardRef functional component that renders a native <input type="file"> wrapped in an optional <label>. There are no internal layers or abstractions — props flow straight into the rendered markup, and the one piece of logic (handleChangeFile) reads the selected file with the browser’s FileReader, hands the raw text to PapaParse, and forwards the parsed result plus file metadata to the caller through the onFileLoaded callback, with a separate onError path for parse or strict-mode failures. The ref is forwarded directly to the underlying input element rather than exposing an imperative API, so consumers integrate it like any other native form control.

Tech Stack Written in TypeScript against React 16-18 as peer dependencies, with papaparse as the sole runtime dependency and prop-types layered on for runtime prop validation alongside the TypeScript types. The build uses Webpack 4 with ts-loader and Babel presets to produce the published dist/ bundle and type declarations. Tooling includes ESLint (react-app + jsx-a11y + prettier configs), release-it with conventional-changelog for versioned releases, and Husky + commitlint to enforce commit message conventions.

Code Quality Tests run under Jest with @testing-library/react and react-test-renderer, covering rendering, snapshot output, and every configurable prop (accept, CSS classes, label, disabled, ids/names) individually. Accessibility is explicitly tested via jest-axe asserting zero violations. A GitHub Actions workflow runs the suite across multiple Node versions on every push and pull request. Error handling is explicit through the onError callback rather than thrown exceptions, and TypeScript interfaces (CSVReaderProps, IFileInfo) give consumers compile-time guarantees about props and callback payloads.

API Design The public surface is intentionally narrow: one required callback (onFileLoaded), one optional error callback, and a set of styling/behavior props with sensible defaults, so most consumers can start from the single-line usage example in the README. PapaParse’s own configuration object is passed through unmodified rather than re-wrapped, which keeps the component’s own API small while still exposing PapaParse’s full feature set (headers, dynamic typing, custom header transforms) to callers who need it.