The page lifecycle provider introduces a concept of page lifecycles to route changes. The useful scenario is to raise an event when navigations happen (easy using react-router already), then raise another event once all the data has been loaded for that r
npm install page-lifecycle-providerThe page lifecycle provider introduces a concept of page lifecycles to route changes. The useful scenario is to raise an event when navigations happen (easy using react-router already), then raise another event once all the data has been loaded for that route (harder).
Render PageLifecycleProvider between React-Router Router and the routes of your application.
``ts`
const App: React.SFC<{}> = () => (
)
onEvent will then raise page-load-started and page-load-complete events.
Add loading and loaded props to your component which loads data
`ts
const ComponentWhichLoadsData = () => {
const pageProps = React.useContext(PagePropertiesContext)
const [data, setData] = React.useState()
React.useEffect(() => {
pageProps.beginLoadingData()
getData().then(loadedData => {
setData(loadedData)
pageProps.endLoadingData()
})
})
return data ?
}
`
The PageLifecycleProvider also can be used instead of the context if you have a way to globally know when data is being loaded.
`ts`
const App = () => (
{({ beginLoadingData, endLoadingData }) => (
onEndLoadData={endLoadingData}
>
)}
)
Often you want extra data in your events, you can do this with the PageProps component
`ts
const ComponentWhichLoadsData = () => {
const pageProps = React.useContext(PagePropertiesContext)
const [data, setData] = React.useState()
React.useEffect(() => {
pageProps.beginLoadingData()
getData().then(loadedData => {
setData(loadedData)
pageProps.endLoadingData()
})
})
return data ?
}
`
Now the events will have { payload: { extra: 'value' }}. Multiple page props will be merged together.
Page events are:
`ts
export interface PageLoadStarted {
type: 'page-load-started'
timeStamp: number
originator: string
payload: {
[key: string]: any
}
}
export interface PageLoadFailed {
type: 'page-load-failed'
timeStamp: number
originator: string
payload: {
error: string
[key: string]: any
}
}
export interface PageLoadComplete {
type: 'page-load-complete'
timeStamp: number
originator: string
payload: {
[key: string]: any
}
}
``