Skip to content

MarcoScabbiolo/react-hoc-loading

Repository files navigation

react-hoc-loading

Travis Coverage Status Maintainability Dependencies

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.

About

HOC to make React components loading.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published