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.

import loading from 'react-hoc-loading';
import React from 'react';

@loading({ LoadingComponent: () => <span>Loading...</span> })
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.renderLoading()}
       </div>
    );
  }
}

<MyComponent loading={false}> // <div></div>
<MyComponent loading> // <div><span>Loading...</span></div>

Set a default LoadingComponent globally with .setDefaultLoadingComponent

loading.setDefaultLoadingComponent(() => <img src="loading.gif" />);

@loading()
class MyComponent extends React.Component { ... }

<MyComponent loading> // <div><img src="loading.gif" /></div>

Use different CSS classes for different components with the className option

loading.setDefaultLoadingComponent(className => <img className={className} src="loading.gif" />);

@loading({ className: "my-class" })
class MyComponent extends React.Component { ... }

<MyComponent loading> // <div><img className="my-class" src="loading.gif" /></div>

Pass props to the LoadingComponent when calling this.renderLoading

loading.setDefaultLoadingComponent((message, className) => (
  <div>
    <div>
      <img className={className} src="loading.gif" />
     </div>
    <p>{message}</p>
  </div>
));

@loading({ className: 'my-class' })
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        { this.renderLoading({ message: 'Fetching data from the server', className: 'my-other-class' }) }
      </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

(options: LoadingOptions) => (Component: React.ComponentType<any>) => React.ComponentType<any>

A function that takes some options and returns a HOC that will extend Component with the renderLoading method.

#renderLoading

(props: object) => React.Element<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: React.ComponentType<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

(DefaultComponent: React.ComponentType<any>) => void

Sets the default LoadingComponent option globally. By default it is () => <div>Loading</div>

loading.setDefaultBaseComponent

(DefaultBaseComponent: React.ComponentType<any>) => 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.