react-hoc-loader

1.0.0 • Public • Published

React HOC Loader

HOC (Higher Order Component) Loader for Redux Containers

Nodei.co badge
Travis CI Build Status NPM version NPM downloads Dependency Status

Installation

yarn add react-hoc-loader

or

npm install react-hoc-loader

Usage

Component sits within the container and fires off a function in a similar way to which componentWillMount would.

An optional loading indicator can be passed from a state key to determine if a loading indicator should be displayed before rendering the intended component.

If there is no component, but you would like to display a simple text message, then pass undefined as the 4th argument and a string message as the 5th.

Example:

import { connect } from 'react-redux';
import HOCLoader from 'react-hoc-loader';
import LoadingScreen from './loading-screen';
import Component from './components';

const mapStateToProps = ({ reducer }) => ({
  // State key to determine if a load is in progress
  isLoading: reducer.isLoading
});

export const mapDispatchToProps = dispatch => ({
  onLoad() {
    // Function to fire off when container first loads
    dispatch({ type: 'LOADING_DATA' });
  },
});

...
const Container = connect(
  mapStateToProps,
  mapDispatchToProps,
)(HOCLoader(Component, 'onLoad', 'isLoading', LoadingScreen));

...

History

Discover the release history by heading on over to the releases page.

License

Unless stated otherwise all works are:

  • Copyright © 2018+ Reme Le Hane

and licensed under:

Package Sidebar

Install

npm i react-hoc-loader

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

325 kB

Total Files

15

Last publish

Collaborators

  • remejuan