0.1.0 • Published 1 year ago
react-renderer-status-split v0.1.0
React Component helps to split render.
Install
yarn add react-renderer-status-split
or
npm i -S react-renderer-status-split
Usage
Component is designed to avoid deep ternary in components. You can set renders you want to handle for your action. Check simple list with all types of renders:
import { RendererStatusSplit } from 'react-renderer-status-split'
function MyComponent() {
const statuses = {
isLoading: false,
error: "",
isDone: false,
};
return (
<RendererStatusSplit
statuses={statuses}
renderPreview={() => <div>action not started</div>}
renderLoading={() => <div>action is loading</div>}
renderError={(error) => <div>action errored: {error}</div>}
renderEmpty={() => <div>no data after action</div>}
render={() => <div>show data</div>}
/>
)
}
Props
- statuses required
- isLoading optional - (Boolean)
- isDone optional - (Boolean) Defines if action is completed
- data optional - (any) Defines if some data was received after action.
Will be used for
renderEmpty
- error optional - (String) check if action was completed with error,
so it will try to select
renderError()
- isEmpty optional - (Boolean) - Designed for force setting if data exists or not.
If
isEmpty
is set tofalse
, it will skip all status renders. render(data) required - Always default render. Other renders can replace this one for specific statuses. Ideally if all renders exists, this one will be visible only when action is completed and data exists.
renderLoading() optional - means action in progress. Checks if
isLoading
is true- renderEmpty() optional - means action is completed, but data is empty. Checks if
data
is empty. OrisEmpty
is true. - renderError(error) optional - means action is errored. will be used when
error
is not empty - renderPreview() optional - means action is not started yet.
Advanced usage
Composition example using: api, redux, react-hooks-async-handlers
import { RendererStatusSplit } from 'react-renderer-status-split'
import { useAsyncFetch } from 'react-hooks-async-handlers'
function MyComponent() {
const dispatch = useDispatch()
const { pageObject } = useSelector((state) => ({
pageObject: state.pageObject,
}))
const fetchAction = useAsyncFetch(
async () => {
await dispatch(Dispatcher.getPageObject())
},
{ maxTries: 3 },
)
return (
<div>
<h1>Page Title</h1>
<div className={'content-container'}>
<RendererStatusSplit
statuses={fetchAction}
isEmpty={_.isEmpty(pageObject)}
renderPreview={() => <div>Loading will start soon</div>}
renderLoading={() => <div>Component is loading</div>}
renderError={(error) => <span color={'red'}>{error}</span>}
renderEmpty={() => <div>Component is not found</div>}
render={() => <ComponentInfo data={pageObject} />}
/>
</div>
</div>
)
}
See Also
List of libraries that work well with status renderer: