@alexseitsinger/react-render-controller

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

{
  name: String,
  data: Array|Object,
  getter: Function,
  setter: Function,
  empty: Object|Array,
  cached: Boolean,
}

Skipped Pathname

{
  url: String,
  reverse: Boolean,
}

Example

In app root

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

const App = ({ store, routerHistory }) => (
  <RenderControllerProvider
    onRenderFirst={() => <LoadingScreen />}
    onRenderWithout={() => <FailedScreen />}
    getPathnames={() => {
      const state = store.getState()
      const { current, last } = state.locations
      return {
        lastPathname: last.pathname,
        currentPathname: currentPathname,
      }
    }}>
    <Provider store={store}>
      <ConnectedRouter history={routerHistory}>
        <Route path={"/"} exact component={IndexPage} />
      </ConnectedRouter>
    </Provider>
  </RenderControllerProvider>
)

Within a page component

import { RenderController } from "@alexseitsinger/react-render-controler"

const HomePage = ({
  dates,
  getDates,
  setDates,
}) => (
  <RenderController
    controllerName={"home-page-dates-controller"}
    targets={[
      {
        name: "dates",
        data: dates,
        getter: getDates,
        setter: setDates,
        empty: {},
        cached: true,
      },
    ]}
    skippedPathnames={[
      {
        url: "/about",
        reverse: true,
      },
    ]}
    renderWith={() => (
      <div>
        {Object.keys(dates).map(key => (
          <div key={"fdsfsd"}>{key}</div>
        ))}
      </div>
    )}
  />
)