Versatile before hooks for react components
npm install react-before-renderLet's you:
* load data by resolving a promise before a react component renders
* specify a loading component to display before renders
* reload data conditionally when props change
* integrate other react HOCs like react-router and react-redux
``
import { beforeRender } from 'react-before-render';
// ...
export default beforeRender({
propTypes: {
propNeeded: PropType.object
},
contextTypes: {
contextNeeded: PropType.object
},
wrappers: [OrderedHOCsToApply],
load: ({ props, context }) => {
return somePromiseResolvedBeforeRender;
},
shouldReload: (props, nextProps) => {
return props.thing !== nextProps.thing;
},
loadingComponent: LoadingComponentToShowBeforeRender,
})(SomeReactComponent);
`
Example usage with react-router v4, react-redux, and decorator syntax:
```
@beforeRender({
contextTypes: {
store: PropTypes.object.isRequired
},
propTypes: {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired
},
wrappers: [withRouter],
load: ({props, context}) => {
const store = context.store;
return store.dispatch(getSession());
},
shouldReload: (props, nextProps) => {
return props.match.params.id !== nextProps.match.params.id;
},
loadingComponent: LoadingSpinner
})
@withRouter
@connect(() => (), {})
export default class Example extends React.Component {
// ...
}