Simple ReactJS component for rendering data with loading, failure & empty states.
Note: required React v16.9+
import DataWrapper from 'react-data-wrapper';
<DataWrapper
fetchFunc={store.fetch}
isEmpty={store.empty}
loading={<div>Loading posts...</div>}
failure={<ErrorLoading />}
empty={<div>No data</div>}
>
<PostsList posts={store.posts} />
</DataWrapper>
Note: ErrorLoading should have onReloadClick: () => Promise<void>
prop.
npm i -S react-data-wrapper
Author: SanichKotikov
Source Code: https://github.com/SanichKotikov/react-data-wrapper
#reactjs #react #javascript