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: