Quickly handle errors and data loading in UI
General error handling and data loading for fast prototyping, internal admin tool or simple email subscribtion where you don’t need rocket science… because doing it right takes some time.
uninitialized
: No data to display, only loader will be present.
default
: User interaction available, but there still might be error passed in default state. There is special case for empty array passed in props.data
showing <NoDataComponent />
.
loading
: Data turned up in loading state while there is still previous state available to show, e.g. user is sending form, list is refreshing.
finite
, crash
: Data flow is finished with no more interaction available for user
successful sign up, filled form, component failed loading.
First provide config for hoc, all components are optional.
// status.js
import withStatus from 'react-view-lifecycle'
const Loader = props => <div>loading...</div>
const Error = props => <div>something bad happened</div>
const NoData = props => <div>no data to display</div>
export default withStatus({
loader: MyLoader,
error: Error,
noData: NoData,
})
Then wrap component showing data with this hoc and pass status
, error
and data
in props.
import status from './status'
const MyComponent = props => (...)
export default status(MyComponent);
For better understanding run npm start
in /examples
folder