Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-csv-importer
Advanced tools
react-csv-importer - npm Package Compare versions
Comparing version 0.6.0 to 0.7.0
@@ -5,2 +5,50 @@ // Generated by dts-bundle-generator v6.4.0 | ||
| export interface ImporterLocale { | ||
| general: { | ||
| goToPreviousStepTooltip: string; | ||
| nextButton: string; | ||
| }; | ||
| fileStep: { | ||
| initialDragDropPrompt: string; | ||
| activeDragDropPrompt: string; | ||
| getImportError: (message: string) => string; | ||
| getDataFormatError: (message: string) => string; | ||
| goBackButton: string; | ||
| rawFileContentsHeading: string; | ||
| previewImportHeading: string; | ||
| dataHasHeadersCheckbox: string; | ||
| previewLoadingStatus: string; | ||
| }; | ||
| fieldsStep: { | ||
| stepSubtitle: string; | ||
| requiredFieldsError: string; | ||
| dragSourceAreaCaption: string; | ||
| getDragSourcePageIndicator: (currentPage: number, pageCount: number) => string; | ||
| getDragSourceActiveStatus: (columnCode: string) => string; | ||
| nextColumnsTooltip: string; | ||
| previousColumnsTooltip: string; | ||
| clearAssignmentTooltip: string; | ||
| selectColumnTooltip: string; | ||
| unselectColumnTooltip: string; | ||
| dragTargetAreaCaption: string; | ||
| getDragTargetOptionalCaption: (field: string) => string; | ||
| getDragTargetRequiredCaption: (field: string) => string; | ||
| dragTargetPlaceholder: string; | ||
| getDragTargetAssignTooltip: (columnCode: string) => string; | ||
| dragTargetClearTooltip: string; | ||
| columnCardDummyHeader: string; | ||
| getColumnCardHeader: (code: string) => string; | ||
| }; | ||
| progressStep: { | ||
| stepSubtitle: string; | ||
| uploadMoreButton: string; | ||
| finishButton: string; | ||
| statusError: string; | ||
| statusComplete: string; | ||
| statusPending: string; | ||
| processedRowsLabel: string; | ||
| }; | ||
| } | ||
| export declare const enUS: ImporterLocale; | ||
| export declare const deDE: ImporterLocale; | ||
| export interface CustomizablePapaParseConfig { | ||
@@ -57,6 +105,7 @@ delimiter?: Papa.ParseConfig["delimiter"]; | ||
| children?: ImporterContentRenderProp | React.ReactNode; | ||
| locale?: ImporterLocale; | ||
| } | ||
| export declare const ImporterField: React.FC<ImporterFieldProps>; | ||
| export declare function Importer<Row extends BaseRow>({ assumeNoHeaders, restartable, processChunk, onStart, onComplete, onClose, children: content, ...customPapaParseConfig }: ImporterProps<Row>): React.ReactElement; | ||
| export declare function Importer<Row extends BaseRow>({ assumeNoHeaders, restartable, processChunk, onStart, onComplete, onClose, children: content, locale, ...customPapaParseConfig }: ImporterProps<Row>): React.ReactElement; | ||
| export {}; |
| { | ||
| "name": "react-csv-importer", | ||
| "version": "0.6.0", | ||
| "version": "0.7.0", | ||
| "description": "React CSV import widget with user-customizable mapping", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -6,32 +6,39 @@ # React CSV Importer | ||
| This library combines an uploader + CSV parser + raw file preview + UI for custom user column | ||
| mapping, all in one. Relies on the popular PapaParse CSV library to preview and process file contents directly in-browser. | ||
| mapping, all in one. It wraps the popular PapaParse CSV library to preview and process file contents directly in-browser. | ||
| Use this to implement bulk data import in your app: let users to drop a file for upload, | ||
| preview the raw uploaded data before parsing and pick which columns to import. Your front-end application logic directly receives the resulting array of JSON objects in streamed reasonable-sized chunks: you can then validate and send the data to the backend in any final format it requires instead of raw CSV. | ||
| Use this to implement the following bulk data import story in your app: | ||
| [Try the live editable code sandbox](https://codesandbox.io/s/github/beamworks/react-csv-importer/tree/master/demo-sandbox) or see the [themed demo app](https://react-csv-importer.vercel.app/). | ||
| - 📤 user drag-drops (or selects) a file for upload | ||
| - 👓 previews the raw uploaded data before parsing | ||
| - ✏ picks which columns to import | ||
| Your front-end code will receive parsed CSV data as a series of JSON objects. You can then validate and send the data to the backend in any final format it may require instead of raw CSV. Parsing is async-enabled, so your logic can take its time: meanwhile, the user will see an animated progress bar. | ||
|  | ||
| The UI theme is standalone (no external dependencies such as Material UI) and tailored to | ||
| universally fit within most application design frameworks. Interface elements are tested for screen | ||
| reader accessibility and keyboard-only usage. | ||
| [Try the live editable code sandbox](https://codesandbox.io/s/github/beamworks/react-csv-importer/tree/master/demo-sandbox) or see the [themed demo app](https://react-csv-importer.vercel.app/). | ||
| This package is easy to fork with your own customizations, and you can use your fork directly as a [Git dependency](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#git-urls-as-dependencies) in any of your projects. See below. | ||
| ### Feature summary: | ||
| Feature summary: | ||
| - uses Papa Parse CSV library | ||
| - wraps the well-known Papa Parse CSV library | ||
| - raw file preview | ||
| - user-selectable column mapping (drag-drop UI) | ||
| - auto-map fields to matching column names | ||
| - user-selectable column mapping (drag-drop UI) | ||
| - optional fields | ||
| - self-contained styling | ||
| - strip leading BOM character in data | ||
| - arbitrary CSV file size (true streaming support) | ||
| - correctly handles multibyte streaming (see https://github.com/mholt/PapaParse/issues/908) | ||
| - runs entirely in-browser | ||
| - TypeScript support | ||
| - screen reader a11y | ||
| - keyboard a11y | ||
| - i18n | ||
| ### Enterprise-level data file handling: | ||
| - 1GB+ CSV file size (true streaming support without crashing browser) | ||
| - automatically strip leading BOM character in data | ||
| - correctly handles multibyte streaming (see https://github.com/mholt/PapaParse/issues/908) | ||
| - runs entirely in-browser | ||
| - async parsing logic (pauses while your app makes backend updates) | ||
| The UI theme CSS is standalone (no external dependencies such as Material UI) and tailored to | ||
| universally fit within most application design frameworks. Interface elements are tested for screen | ||
| reader accessibility and keyboard-only usage (yes, actually!). | ||
| ## Install | ||
@@ -47,2 +54,4 @@ | ||
| This package is easy to fork with your own customizations, and you can use your fork directly as a [Git dependency](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#git-urls-as-dependencies) in any of your projects, see below. | ||
| ## Example Usage | ||
@@ -60,3 +69,3 @@ | ||
| restartable={false} // optional, lets user choose to upload another file when import is complete | ||
| onStart={({ file, fields, columns, skipHeaders }) => { | ||
| onStart={({ file, preview, fields, columnFields }) => { | ||
| // optional, invoked when user has mapped columns and started import | ||
@@ -66,4 +75,4 @@ prepMyAppForIncomingData(); | ||
| processChunk={async (rows, { startIndex }) => { | ||
| // required, receives a list of parsed objects based on defined fields and user column mapping; | ||
| // may be called several times if file is large | ||
| // required, may be called several times | ||
| // receives a list of parsed objects based on defined fields and user column mapping; | ||
| // (if this callback returns a promise, the widget will wait for it before parsing more data) | ||
@@ -104,3 +113,3 @@ for (row of rows) { | ||
| The `preview` object contains a snippet of CSV file information (only the first portion of the file is read, not the entire thing). The structure is: | ||
| The `preview` object available to some callbacks above contains a snippet of CSV file information (only the first portion of the file is read, not the entire thing). The structure is: | ||
@@ -114,7 +123,8 @@ ```js | ||
| ], | ||
| skipHeaders: false // true when user selected that data has no headers | ||
| skipHeaders: false, // true when user selected that data has no headers | ||
| parseWarning: undefined, // any non-blocking warning object produced by Papa Parse | ||
| } | ||
| ``` | ||
| Importer component children may be defined as a render-prop function that receives the above `preview` and also the original file reference. It can then, for example, dynamically return different fields depending which headers are present in the CSV. | ||
| Importer component children may be defined as a render-prop function that receives an object with `preview` and `file` fields (see above). It can then, for example, dynamically return different fields depending which headers are present in the CSV. | ||
@@ -127,2 +137,18 @@ ## Dependencies | ||
| ## Internationalization (i18n) and Localization (l10n) | ||
| You can swap the text used in the UI to a different locale. | ||
| ``` | ||
| import { Importer, deDE } from 'react-csv-importer'; | ||
| // provide the locale to main UI | ||
| <Importer | ||
| locale={deDE} | ||
| // normal props, etc | ||
| /> | ||
| ``` | ||
| You can also pass your own fully custom locale definition as the locale value. See `ImporterLocale` interface in `src/locale` for the full definition, and use an existing locale like `enUS` as basis. For better performance, please ensure that the value is stable (i.e. does not change on every render). | ||
| ## Local Development | ||
@@ -152,2 +178,4 @@ | ||
| - 0.7.0 | ||
| - add i18n | ||
| - 0.6.0 | ||
@@ -191,1 +219,5 @@ - improve multibyte stream parsing safety | ||
| - lifecycle hooks receive info about the import | ||
| ## Credits | ||
| Translations contributed by: [**@tstehr**](https://github.com/tstehr) and [**@Valodim**](https://github.com/Valodim). |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.63%
205382
- Lines of code
- increased by10.54%
1646
- Number of lines in readme file
- increased by17.49%
215
No dependency changes