rfl

react-fetch-loading

A simple loading component using HOC for fetching data from server.

Showing:

Popularity

Downloads/wk

2

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

6

Size (min+gzip)

15.7KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Enhanced react component for loading on fetching

This package provides a single enhanced react component, which used for injecting loading component to a component using React HOC (Higher Order Component).

Installation

Using npm:

npm install --save react-fetch-loading

Using yarn:

yarn add react-fetch-loading

Importing package

Using ES5: var loadingInjector = require('react-fetch-loading');

Using ES6: import loadingInjector from 'react-fetch-loading';

Usage

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.

Using compose:

You can composing loadingInjector using another library like lodash or ramda.

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

Using react-redux:

let EnhancedComponent = connect(mapStateToProps)(loadingInjector('isFetching')(ComponentThatNeedsLoadingIndicator);

Then you can exporting the component simply by:

export default EnhancedComponent;

Loading Indicator:

Currently, we only have one indicator to show. Which is coming from material-ui circular progress. We'll provide more loading indicator soon!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100