1.3.1 • Published 4 years ago
react-with-loading-hoc v1.3.1
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,
};