react-csv-reader

React component that handles csv file input and its parsing. Example Preview: uiwjs.github.io/react-csv-reader

Quick Start

1npm install @uiw/react-csv-reader

1import CSVReader from '@uiw/react-csv-reader';
2
3<CSVReader
4  onFileLoaded={(data, iFileInfo, iOriginalFile, text) => { }}
5/>

Example

1import React, { useState } from 'react';
2import CSVReader from '@uiw/react-csv-reader';
3import JsonView from '@uiw/react-json-view';
4import { lightTheme } from '@uiw/react-json-view/light';
5
6export default function Demo() {
7  const [value, setValue] = useState([]);
8  return (
9    <React.Fragment>
10      <CSVReader
11        onFileLoaded={(data, iFileInfo, iOriginalFile, text) => {
12          setValue(data);
13        }}
14      />
15      {value && value.length > 0 && (
16        <JsonView
17          keyName="data"
18          value={value}
19          collapsed={false}
20          style={lightTheme}
21        />
22      )}
23    </React.Fragment>
24  );
25}

parserOptions

1import React, { useState } from 'react';
2import CSVReader from '@uiw/react-csv-reader';
3import JsonView from '@uiw/react-json-view';
4import { lightTheme } from '@uiw/react-json-view/light';
5import { darkTheme } from '@uiw/react-json-view/dark';
6
7export default function Demo() {
8  const [parserOptions, setParserOptions] = useState({
9    header: true
10  });
11  const [value, setValue] = useState([]);
12  const [fileInfo, setFileInfo] = useState();
13  const [originalFile, setOriginalFile] = useState();
14
15  const change = (evn) => {
16    console.log('evn:', evn.target.id)
17    console.log('evn:', evn.target.checked)
18    
19    setParserOptions({ ...parserOptions, [evn.target.id]: evn.target.checked })
20  }
21  return (
22    <React.Fragment>
23      <CSVReader
24        parserOptions={parserOptions}
25        onFileLoaded={(data, iFileInfo, iOriginalFile) => {
26          setValue(data);
27          setFileInfo(iFileInfo);
28          const fileData = {};
29          for (let file in iOriginalFile) {
30            fileData[file] = iOriginalFile[file];
31          }
32          setOriginalFile(fileData);
33        }}
34      />
35      <div style={{ background: '#fff', padding: 10 }}>
36        <label>
37          <input type="checkbox" id="stream" checked={!!parserOptions.stream} onChange={change} /> Stream
38          <p style={{ whiteSpace :'pre-wrap' }}>Results are delivered row by row to a step function. Use with large inputs that would crash the browser.</p>
39        </label>
40        <label>
41          <input type="checkbox" id="worker" checked={!!parserOptions.worker} onChange={change} /> Worker thread
42          <p style={{ whiteSpace :'pre-wrap' }}>Uses a separate thread so the web page doesn't lock up. </p>
43        </label>
44        <label>
45          <input type="checkbox" id="header" checked={!!parserOptions.header} onChange={change} /> Header row
46          <p style={{ whiteSpace :'pre-wrap' }}>Keys data by field name rather than an array. </p>
47        </label>
48        <label>
49          <input type="checkbox" id="dynamicTyping" checked={!!parserOptions.dynamicTyping} onChange={change} /> Dynamic typing
50          <p style={{ whiteSpace :'pre-wrap' }}>Turns numeric data into numbers and true/false into booleans. </p>
51        </label>
52        <label>
53          <input type="checkbox" id="skipEmptyLines" checked={!!parserOptions.skipEmptyLines} onChange={change} /> Skip empty lines
54          <p style={{ whiteSpace :'pre-wrap' }}>By default, empty lines are parsed; check to skip. </p>
55        </label>
56      </div>
57
58      {value && value.length > 0 && <JsonView keyName="data" value={value} collapsed={false} style={lightTheme} />}
59      {fileInfo && <JsonView keyName="fileInfo" value={fileInfo} collapsed={false} style={darkTheme} />}
60      {originalFile && <JsonView keyName="new File()" value={Object.assign(originalFile)} collapsed={false} style={lightTheme} />}
61    </React.Fragment>
62  );
63}

Get csv raw text content

The original text can also be obtained using await iOriginalFile.text().

1import React, { useState } from 'react';
2import CSVReader from '@uiw/react-csv-reader';
3import JsonView from '@uiw/react-json-view';
4import { lightTheme } from '@uiw/react-json-view/light';
5
6export default function Demo() {
7  const [value, setValue] = useState('');
8  return (
9    <React.Fragment>
10      <CSVReader
11        onFileLoaded={(data, iFileInfo, iOriginalFile, text) => {
12          setValue(text);
13        }}
14      />
15      {value && value.length > 0 && (
16        <pre>{value}</pre>
17      )}
18    </React.Fragment>
19  );
20}

Props

1import { ParseConfig, ParseWorkerConfig, ParseLocalConfig, LocalFile } from 'papaparse';
2export interface IFileInfo {
3  name: string;
4  size: number;
5  type: string;
6  modifiedAt: number;
7}
8export interface CSVReaderProps<T, TFile extends LocalFile = LocalFile> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onError'> {
9  strict?: boolean;
10  encoding?: string;
11  parserOptions?: Partial<ParseWorkerConfig<T>> & Partial<ParseLocalConfig<T>> & ParseConfig<T, TFile>;
12  onError?: (error: Error) => void;
13  onFileLoaded: (data: Array<any>, fileInfo: IFileInfo, originalFile?: File, text?: string) => void;
14}
15declare const CSVReader: import("react").ForwardRefExoticComponent<CSVReaderProps<unknown, LocalFile> & import("react").RefAttributes<HTMLInputElement>>;
16export default CSVReader;

1export interface ParseConfig<T = any, TInput = undefined> {
2  /**
3   * The delimiting character.
4   * Leave blank to auto-detect from a list of most common delimiters, or any values passed in through `delimitersToGuess`.
5   * It can be a string or a function.
6   * If a string, it can be of any length (so multi-character delimiters are supported).
7   * If a function, it must accept the input as first parameter and it must return a string which will be used as delimiter.
8   * In both cases it cannot be found in `Papa.BAD_DELIMITERS`.
9   * @default // auto-detect
10   */
11  delimiter?: string | ((input: string) => string) | undefined;
12  /**
13   * The newline sequence. Leave blank to auto-detect. Must be one of `\r`, `\n`, or `\r\n`.
14   * @default // auto-detect
15   */
16  newline?: '\r' | '\n' | '\r\n' | undefined;
17  /**
18   * The character used to quote fields. The quoting of all fields is not mandatory. Any field which is not quoted will correctly read.
19   * @default '"'
20   */
21  quoteChar?: string | undefined;
22  /**
23   * The character used to escape the quote character within a field.
24   * If not set, this option will default to the value of `quoteChar`,
25   * meaning that the default escaping of quote character within a quoted field is using the quote character two times.
26   * (e.g. `"column with ""quotes"" in text"`)
27   * @default '"'
28   */
29  escapeChar?: string | undefined;
30  /**
31   * If `true`, the first row of parsed data will be interpreted as field names.
32   * An array of field names will be returned in meta, and each row of data will be an object of values keyed by field name instead of a simple array.
33   * Rows with a different number of fields from the header row will produce an error.
34   * Warning: Duplicate field names will overwrite values in previous fields having the same name.
35   * @default false
36   */
37  header?: boolean | undefined;
38  /**
39   * A function to apply on each header. Requires header to be true. The function receives the header as its first argument and the index as second.
40   */
41  transformHeader?(header: string, index: number): string;
42  /**
43   * If `true`, numeric and boolean data will be converted to their type instead of remaining strings.
44   * Numeric data must conform to the definition of a decimal literal.
45   * Numerical values greater than 2^53 or less than -2^53 will not be converted to numbers to preserve precision.
46   * European-formatted numbers must have commas and dots swapped.
47   * If also accepts an object or a function.
48   * If object it's values should be a boolean to indicate if dynamic typing should be applied for each column number (or header name if using headers).
49   * If it's a function, it should return a boolean value for each field number (or name if using headers) which will be passed as first argument.
50   * @default false
51   */
52  dynamicTyping?:
53      | boolean
54      | { [headerName: string]: boolean; [columnNumber: number]: boolean }
55      | ((field: string | number) => boolean)
56      | undefined;
57  /** If > 0, only that many rows will be parsed. */
58  preview?: number | undefined;
59  /**
60   * A string that indicates a comment (for example, "#" or "//").
61   * When Papa encounters a line starting with this string, it will skip the line.
62   * @default false
63   */
64  comments?: false | string | undefined;
65  /**
66   * If `true`, lines that are completely empty (those which evaluate to an empty string) will be skipped.
67   * If set to `'greedy'`, lines that don't have any content (those which have only whitespace after parsing) will also be skipped.
68   * @default false
69   */
70  skipEmptyLines?: boolean | 'greedy' | undefined;
71  /**
72   * Fast mode speeds up parsing significantly for large inputs.
73   * However, it only works when the input has no quoted fields.
74   * Fast mode will automatically be enabled if no " characters appear in the input.
75   * You can force fast mode either way by setting it to true or false.
76   */
77  fastMode?: boolean | undefined;
78  /**
79   * A function to apply on each value.
80   * The function receives the value as its first argument and the column number or header name when enabled as its second argument.
81   * The return value of the function will replace the value it received.
82   * The transform function is applied before `dynamicTyping`.
83   */
84  transform?(value: string, field: string | number): any;
85  /**
86   * An array of delimiters to guess from if the delimiter option is not set.
87   * @default [',', '\t', '|', ';', Papa.RECORD_SEP, Papa.UNIT_SEP]
88   */
89  delimitersToGuess?: string[] | undefined;
90  /**
91   * To stream the input, define a callback function.
92   * Streaming is necessary for large files which would otherwise crash the browser.
93   * You can call parser.abort() to abort parsing.
94   * And, except when using a Web Worker, you can call parser.pause() to pause it, and parser.resume() to resume.
95   */
96  step?(results: ParseStepResult<T>, parser: Parser): void;
97  /**
98   * The callback to execute when parsing is complete.
99   * It receives the parse results. If parsing a local file, the File is passed in, too.
100   * When streaming, parse results are not available in this callback.
101   */
102  complete?(results: ParseResult<T>, file: TInput): void;
103  /**
104   * A function to execute before parsing the first chunk.
105   * Can be used with chunk or step streaming modes.
106   * The function receives as an argument the chunk about to be parsed, and it may return a modified chunk to parse.
107   * This is useful for stripping header lines (as long as the header fits in a single chunk).
108   */
109  beforeFirstChunk?(chunk: string): string | void;
110}

1export interface ParseWorkerConfig<T = any> extends ParseConfig<T> {
2  /**
3   * Whether or not to use a worker thread.
4   * Using a worker will keep your page reactive, but may be slightly slower.
5   */
6  worker: true;
7  /**
8   * The callback to execute when parsing is complete.
9   * It receives the parse results. If parsing a local file, the File is passed in, too.
10   * When streaming, parse results are not available in this callback.
11   */
12  complete(results: ParseResult<T>): void;
13}

1// Base interface for all async parsing
2interface ParseAsyncConfigBase<T = any, TInput = undefined> extends ParseConfig<T, TInput> {
3  /**
4   * Whether or not to use a worker thread.
5   * Using a worker will keep your page reactive, but may be slightly slower.
6   * @default false
7   */
8  worker?: boolean | undefined;
9  /**
10   * Overrides `Papa.LocalChunkSize` and `Papa.RemoteChunkSize`.
11   */
12  chunkSize?: number | undefined;
13  /**
14   * A callback function, identical to `step`, which activates streaming.
15   * However, this function is executed after every chunk of the file is loaded and parsed rather than every row.
16   * Works only with local and remote files.
17   * Do not use both `chunk` and `step` callbacks together.
18   */
19  chunk?(results: ParseResult<T>, parser: Parser): void;
20  /**
21   * A callback to execute if FileReader encounters an error.
22   * The function is passed two arguments: the error and the File.
23   */
24  error?(error: Error, file: TInput): void;
25}
26
27// Async parsing local file can specify encoding
28interface ParseLocalConfigBase<T = any, TInput = undefined> extends ParseAsyncConfigBase<T, TInput> {
29  /** The encoding to use when opening local files. If specified, it must be a value supported by the FileReader API. */
30  encoding?: string | undefined;
31}
32
33interface ParseLocalConfigStep<T = any, TInput = undefined> extends ParseLocalConfigBase<T, TInput> {
34  /** @inheritdoc */
35  step(results: ParseStepResult<T>, parser: Parser): void;
36}
37interface ParseLocalConfigNoStep<T = any, TInput = undefined> extends ParseLocalConfigBase<T, TInput> {
38  /** @inheritdoc */
39  complete(results: ParseResult<T>, file: TInput): void;
40}
41
42// Local parsing is async and thus must specify either `step` or `complete` (but may specify both)
43export type ParseLocalConfig<T = any, TInput = undefined> = ParseLocalConfigStep<T, TInput> | ParseLocalConfigNoStep<T, TInput>;

Related

• @uiw/react-xml-reader React component that handles xml file input and its parsing.

Development

Runs the project in development mode.

1# Step 1, run first, listen to the component compile and output the .js file
2# listen for compilation output type .d.ts file
3npm run watch
4# Step 2, development mode, listen to compile preview website instance
5npm run start

Builds the app for production to the build folder.

1npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.