RenderController

Renders a component after its data has been loaded. Expects the use of
@alexseitsinger/redux-locations.

Installation

``
yarn add @alexseitsinger/react-render-controller
`

Props

__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,
}
`

Example

In app root

`javascript
import { RenderControllerProvider } from "@alexseitsinger/react-render-controller"

const App = ({ store, routerHistory }) => (
onRenderFirst={() => }
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,
}) => (
controllerName={"home-page-dates-controller"}
targets={[
{
name: "dates",
data: dates,
getter: getDates,
setter: setDates,
empty: {},
cached: true,
},
]}
skippedPathnames={[
{
url: "/about",
reverse: true,
},
]}
renderWith={() => (