react-with-loading

react-with-loading-srian is a react HOC that shows your data after it's been fetched, a loader when it's loading, and an error if it fails.

Install

npm i react-with-loading-hoc

Quick Start Example

Write your view as normal

const View = ({ id, title, completed }) => (
  <div>
    <div>ID: {id}</div>
    <div>Title: {title}</div>
    <div>Completed? {completed ? 'Yes' : 'No'}</div>
  </div>
);

Wrap it in withLoading

const ViewWithLoading = withLoading(View);

Use the Wrapped component and pass it a loading prop

<ViewWithLoading loading={!state} {...state} />

Advanced Use Example

PropTypes

withLoading.propTypes = {
  Component: PropTypes.element,
  FallbackOptions: PropTypes.shape({  // FallbackOptions allows you to write your own HOC with your own default Fallbacks
    LoadingFallback: PropTypes.func,
    ErrorFallback: PropTypes.func,
  }),
};

Wrapped.propTypes = {
  loading: PropTypes.bool.isRequired,
  error: PropTypes.any,
  LoadingFallback: PropTypes.func,
  ErrorFallback: PropTypes.func,
};