README
react-loading-hoc
react-loading-hoc
is a React higher-order component that abstracts out the loading state of a component to an isLoading
prop.
The intended use case is for frontend designs that have a dedicated loading UI for long-running asynchronous actions. This HOC abstracts out the need to manually setState
on the component; instead, you invoke a prop on the component with a done
callback, which, when called, changes the value of isLoading
passed to the wrapped child component.
API
and this.props.loadingthis.props.isLoading
Each wrapped child component receives the following as props:
isLoading
: True or false, depending on whether the component is currently in a loading state.loading
: A function to be called with a single-parameter function as input. Callingloading
will setisLoading
totrue
, and invoking the callback parameter on its input function will setisLoading
tofalse
.
In the below example, the component's isLoading
prop is true
when the network request is in-flight. In practice, Loading...
is displayed while the component is loading, and Done!
displays at all other times.
import React from 'react';
import request from 'browser-request';
import HOC from 'react-loading-hoc';
/**
* Example usage of the HOC for a client-side AJAX request.
*/
class NetworkRequest extends React.Component {
doNetworkRequest(evt) {
evt.preventDefault();
// The HOC adds a `loading` prop to the wrapped component, intended to be invoked as a function
// to set the current loading state of the component. The parameter provided to `loading` should
// be a single-argument callback function that invokes the callback parameter when the work is
// complete, e.g. when the component is no longer in a loading state.
// In the below example, the `loading` function is invoked at the beginning of the network
// request, and the callback parameter `done` is invoked when the network request is complete.
this.props.loading((done) => request.post('/slow', done));
}
render() {
// The HOC passes an `isLoading` prop to the wrapped component to indicate whether the component
// is in a loading state, as determined by invocations of the `loading` prop function described
// above. Changes to the boolean value of this prop (as performed by the higher-order component)
// will cause React to appropriately re-render this component.
const {isLoading} = this.props;
return (
<div>
<button onClick={this.doNetworkRequest.bind(this)}>
Start async network request
</button>
{isLoading ? 'Loading...' : 'Done!'}
</div>
);
}
}
export default HOC(NetworkRequest);
Accessing the wrapped component
The wrapped component is accessible via a ref
by the property component
. For example, accessing a method defined on a component wrapped in the HOC can be done as follows:
import React from 'react';
import HOC from 'react-loading-hoc';
class Wrapped extends React.Component {
someMethod() {
return 'text';
}
render() {
...
}
}
const hoc = HOC(Wrapped);
console.log(hoc.component.someMethod()); // 'text'
Examples
Use case examples are available in the examples/
directory. To run it locally,
$ git clone ...
$ npm install
$ npm run build-example
$ npm run start
# Starts a server at http://localhost:4700 serving example/index.html