react-sheets-import

Let users load a sheet and map its columns to your model.

Installation

yarn add react-sheets-import

Example

import { Types, mapColumnsToRows } from 'react-sheets-import';

const User = Types.Object({
    name: Types.String(),
    email: Types.String()
});
const rows = [
    ['John', '[email protected]'],
    ['Jane', '[email protected]']
];
const users = mapColumnsToRows(User, rows);

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:

import { Types, mapColumnsToRows } from 'react-sheets-import';

const User = Types.Object({
    name: Types.String().required()
});
const rows = [
    [null],
    ['Jane']
];
const users = mapColumnsToRows(User, rows);

// 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:

import { Types } from 'react-sheets-import';

const User = Types.Object({
    name: Types.String().alias('Name')
});

// 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:

import { Types, mapColumnsToRows } from 'react-sheets-import';

const User = Types.Object({
    name: Types.String().required()
});
const rows = [
    ['John'],
    ['Jane']
];
const users = mapColumnsToRows(User, rows);

users holds:

[
  {
    "name": "John"
  },
  {
    "name": "Jane"
  }
]

<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.

import * as React from 'react';
import ReactDOM from 'react-dom';
import { DropZone } from 'react-sheets-import';
import CSVParser from 'react-sheets-import/dist/parsers/csv';
import XLSXParser from 'react-sheets-import/dist/parsers/xlsx';

class App extends React.Component {
    onChange = (rows) => {
        // rows will contain the sheet's rows
    };

    render() {
        return (
            <DropZone
                onChange={this.onChange}
                parsers={[CSVParser, XLSXParser]}
            >
                Drop your file or browse. 
            </DropZone>
        );
    }
}

ReactDOM.render(<App />, window.document.getElementById('root'));

<InputFile />

A basic <input type="file" /> component.

import * as React from 'react';
import ReactDOM from 'react-dom';
import { InputFile } from 'react-sheets-import';
import CSVParser from 'react-sheets-import/dist/parsers/csv';
import XLSXParser from 'react-sheets-import/dist/parsers/xlsx';

class App extends React.Component {
    onChange = (rows) => {
        // rows will contain the sheet's rows
    };

    render() {
        return (
            <InputFile
                onChange={this.onChange}
                parsers={[CSVParser, XLSXParser]}
            />
        );
    }
}

ReactDOM.render(<App />, window.document.getElementById('root'));