with-lifecycle v0.2.1

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

withLifecycle(
  methods: Object
): HigherOrderComponent

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

const Demo = ({ isLoading }) => (
  <h1>{ isLoading ? 'Loading' : 'Done' }</h1>
);

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:

withLifecycle(
  methodsFactory: (initialProps: Object) => methods: Object
): HigherOrderComponent

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

const Demo = ({ isLoading }) => (
  <h1>{ isLoading ? 'Loading…' : 'Done' }</h1>
);

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