A render controller for components that use data.
npm install @alexseitsinger/react-render-controllerRenders a component after its data has been loaded. Expects the use of
@alexseitsinger/redux-locations.
```
yarn add @alexseitsinger/react-render-controller
__Name__ | __Purpose__ | __Required__ | __Default__
--- | --- | --- | ---
controllerName | The unique name of this controller. | Yes | undefined
targets | An array of target objects | Yes | undefined
renderFirst | The function used to render output before the data loading is attempted | No | undefined
renderWith | The function used to render the output once the data has been loaded | No | undefined
renderWithout | The function used to render the output when data loading failed to produce non-empty result | No | undefined
renderBoth | The function used to render instead of both renderWith and renderWithout | No | undefined
skippedPathnames | An array of objects that unloading should be skipped for. | No | undefined
#### Shapes
###### Target
`javascript`
{
name: String,
data: Array|Object,
getter: Function,
setter: Function,
empty: Object|Array,
cached: Boolean,
}
###### Skipped Pathname
`javascript`
{
url: String,
reverse: Boolean,
}
In app root
`javascript
import { RenderControllerProvider } from "@alexseitsinger/react-render-controller"
const App = ({ store, routerHistory }) => (
onRenderWithout={() =>
getPathnames={() => {
const state = store.getState()
const { current, last } = state.locations
return {
lastPathname: last.pathname,
currentPathname: currentPathname,
}
}}>
)
`
Within a page component
`javascript
import { RenderController } from "@alexseitsinger/react-render-controler"
const HomePage = ({
dates,
getDates,
setDates,
}) => (
targets={[
{
name: "dates",
data: dates,
getter: getDates,
setter: setDates,
empty: {},
cached: true,
},
]}
skippedPathnames={[
{
url: "/about",
reverse: true,
},
]}
renderWith={() => (