react-sheets-import
Let users load a sheet and map its columns to your model.
Installation
yarn add react-sheets-import
Example
; const User = Types;const rows = 'John' 'john@gmail.com' 'Jane' 'jane@gmail.com';const users = ;
Have a look at the examples for a real-world example.
Documentation
Types
Object exposing types to structure your models:
Types.Object()
Types.String()
Apart from Object
, all the types share the same methods.
.required(isRequired: boolean)
Getter/setter to mark a property as required (or not). A row will not be imported if any of its required value is invalid.
Example:
; const User = Types;const rows = null 'Jane';const users = ; // The first row will be ignored because it lacks a name.
.alias(alias: string)
Getter/setter to add an alias to a property, making it easier to identify it. Alternatively, you could also use is as a label.
Example:
; const User = Types; // User[0].label() will return 'Name'
Note: if an alias is not explicitly set, the property's key will be returned.
mapColumnsToRows(columns: Columns, rows: Rows)
Converts the rows into JSON objects according to the columns provided.
Example:
; const User = Types;const rows = 'John' 'Jane';const users = ;
users
holds:
<DropZone />
This component is a simple <div />
with file dropping ability.
It can also be clicked to let the user browse files on their computer.
;;;;; Component { // rows will contain the sheet's rows }; { return <DropZone onChange=thisonChange parsers=CSVParser XLSXParser > Drop your file or browse </DropZone> ; } ReactDOM;
<InputFile />
A basic <input type="file" />
component.
;;;;; Component { // rows will contain the sheet's rows }; { return <InputFile onChange=thisonChange parsers=CSVParser XLSXParser /> ; } ReactDOM;