HOC (Higher Order Component) Loader for Redux Containers

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));

...

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

Unless stated otherwise all works are:

and licensed under: