React-field-loader NPM

A simple way to map promises and/or values to a single onLoad event

Install

npm i react-field-loader

Usage

import React, { Component } from 'react';
import ReactFieldLoader from 'react-field-loader';

const some_promise_function = () => new Promise((resolve, reject) => setTimeout(() => resolve(['uno', 'dos']), 1000));

const SomeAppComponent = class extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        const data_field_async = this.state.data_field_async || [];
        const data_field_sync = this.state.data_field_sync || [];
        return(
            <ReactFieldLoader
                onLoad={(field, data) => this.setState({ [field]: data })}
                onError={(field, error) => console.log('Error: ', field, error)}
                loaders={{
                    'data_field_async': () => some_promise_function(),
                    'data_field_sync': ['tres', 'cuatro']
                }}>
                    <div>
                        <p>{data_field_async.join('--async--')}</p>
                        <p>{data_field_sync.join('--sync--')}</p>
                    </div>
            </ReactFieldLoader>
        )
    }
}