Component lifecycle HOC for React
npm install with-lifecycle



"With Lifecycle" Higher-Order Component (HOC) for React, especially useful with Recompose.
Inspired by Reassemble, in comparison with Recompose lifecycle this HOC provides a handy (and limited) way to use _some_ of React Component Lifecycle methods such as:
* onWillMount(props)
* onDidMount(props)
* onWillReceiveProps(props, nextProps)
* onWillUpdate(props, nextProps)
* onDidUpdate(prevProps, props)
* onWillUnmount(props)
So no this, setState or even constructor, you have no direct access to class instance anymore (:tada:).
```
yarn add recompose with-lifecycle
`js`
withLifecycle(
methods: Object
): HigherOrderComponent
`js
import React from 'react';
import { compose, withState } from 'recompose';
import withLifecycle from 'with-lifecycle';
const Demo = ({ isLoading }) => (
export default compose(
withState('isLoading', 'setLoading', false),
withLifecycle({
onDidMount({ setLoading }) {
setLoading(true, () => {
setTimeout(() => setLoading(false), 3000);
})
},
onWillUnmount() {
console.log('bye');
}
})
)(Demo);
`
In addition, it can handle a factory function which works like Recompose withHandlers factory:
`js`
withLifecycle(
methodsFactory: (initialProps: Object) => methods: Object
): HigherOrderComponent
`js
import React from 'react';
import { compose, withState } from 'recompose';
import withLifecycle from 'with-lifecycle';
const Demo = ({ isLoading }) => (
export default compose(
withState('isLoading', 'setLoading', false),
withLifecycle(
({ shouldLoadOnMount }) => {
if (shouldLoadOnMount) {
return {
onDidMount({ setLoading }) {
setLoading(true, () => {
setTimeout(() => setLoading(false), 1000);
})
}
};
}
}
)
)(Demo);
`
As a bonus you can "share" stuff across different lifecycle methods in that factory scope with let mySharedStuff, just like you did before with this.mySharedStuff using a class instance.
```
yarn start