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:).

Install

``
yarn add recompose with-lifecycle
`

Usage

`js
withLifecycle(
methods: Object
): HigherOrderComponent
`

`js
import React from 'react';
import { compose, withState } from 'recompose';
import withLifecycle from 'with-lifecycle';

const Demo = ({ isLoading }) => (


{ isLoading ? 'Loading' : 'Done' }

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 }) => (


{ isLoading ? 'Loading…' : 'Done' }

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.

Development

`
yarn start
``