react-hoc-loading
HOC to set React components to be loading. Aimed at reusing code for the common pattern of showing a loading image/message when an asynchronous operation is running and a component depends on it.
Install
npm install --save react-hoc-loading
Use
With decorators.
;; @Component { return <div> this </div> ; } <MyComponent loading=false> // <div></div><MyComponent loading> // <div><span>Loading...</span></div>
LoadingComponent
globally with .setDefaultLoadingComponent
Set a default loading; @Component ... <MyComponent loading> // <div><img src="loading.gif" /></div>
className
option
Use different CSS classes for different components with the loading; @Component ... <MyComponent loading> // <div><img className="my-class" src="loading.gif" /></div>
LoadingComponent
when calling this.renderLoading
Pass props to the loading; @Component { return <div> this </div> ; } <MyComponent loading>// Will render<div> <div> <img className="my-other-class" src="loading.gif" /> </div> <p>Fetching data from the server</p></div>
Note: The className
prop passed to this.renderLoading
overrides the className
option.
Reference
loading
ReactComponentType<any>
A function that takes some options
and returns a HOC that will extend Component
with the renderLoading
method.
#renderLoading
ReactElement<typeof LoadingComponent>
It is a method of the extended component returned by loading()()
. Returns the LoadingComponent
element if this.props.loading
is true. The className
passed to renderLoading
will override the one passed in LoadingOptions
.
LoadingOptions
type LoadingOptions = LoadingComponent: ReactComponentType<any>? className: string? loadingPropOptional: boolean fullDisplayName: boolean;
Option | Default | Description |
---|---|---|
LoadingComponent |
Set with loading.setDefaultLoadingComponent |
The component that will be rendered when calling renderLoading |
className |
undefined |
A CSS class that will be passed to the component rendered with renderLoading |
loadingPropOptional |
false |
Makes the loading property of the resulting Component optional instead of required using PropTypes |
fullDisplayName |
false |
If true the displayName of the resulting component will be 'Loading(Component)' instead of 'Component' |
loading.setDefaultLoadingComponent
void
Sets the default LoadingComponent
option globally.
By default it is () => <div>Loading</div>
loading.setDefaultBaseComponent
void
Sets the default component passed to the HOC as its first argument. Be default it is React.PureComponent
, but you will always pass your own component to the HOC unless you're doing something funky.