This package provides a single enhanced react component, which used for injecting loading component to a component using React HOC (Higher Order Component).
npm install --save react-fetch-loading
yarn add react-fetch-loading
var loadingInjector = require('react-fetch-loading');
import loadingInjector from 'react-fetch-loading';
The enhanced component
only need one prop, which is a
boolean for letting the enhanced component to know the fetching state, is it still fetching or done.
You can composing loadingInjector using another library like
let EnhancedComponent = compose( fetchingDataHOC(url), loadingInjector('isFetching'), )(ComponentThatNeedsLoadingIndicator);
or if you want to use stand-alone loadingInjector, you can simply wrap your presentational/stateless component using loadingInjector.
let EnhacedComponent = loadingInjector('isFetching')(ComponentThatNeedsLoadingIndicator);
let EnhancedComponent = connect(mapStateToProps)(loadingInjector('isFetching')(ComponentThatNeedsLoadingIndicator);
Then you can exporting the component simply by:
export default EnhancedComponent;
Currently, we only have one indicator to show. Which is coming from material-ui circular progress. We'll provide more loading indicator soon!