@hocs/with-lifecycle

    0.5.1 • Public • Published

    ♻️ with-lifecycle

    npm ci coverage deps

    Part of a collection of Higher-Order Components 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:

    • onConstructor(props)
    • onWillMount(props)
    • onDidMount(props)
    • onReceiveProps(props, nextProps)getDerivedStateFromProps as a callback but without returned state
    • onGetSnapshotBeforeUpdate(prevProps, props) – any returned value will be passed as snapshot parameter to onDidUpdate
    • onDidUpdate(prevProps, props, snapshot)
    • onWillUnmount(props)
    • onDidCatch(error, info)

    So no this, you have no direct access to class instance anymore (🎉).

    Install

    yarn add @hocs/with-lifecycle
    

    Usage

    withLifecycle(
      methods: Object
    ): HigherOrderComponent
    import React from 'react';
    import { compose, withState } from 'recompose';
    import withLifecycle from '@hocs/with-lifecycle';
     
    const Demo = ({ isLoading }) => (
      <h1>{ isLoading ? 'Loading' : 'Done' }</h1>
    );
     
    export default compose(
      withState('isLoading', 'setLoading', true),
      withLifecycle({
        onDidMount({ setLoading }) {
          setLoading(true, () => {
            setTimeout(() => setLoading(false), 3000);
          })
        },
        onReceiveProps(props, nextProps) {
          console.log(`isLoading: ${props.isLoading} → ${nextProps.isLoading}`);
        }
      })
    )(Demo);

    In addition, it can handle a factory function which works like Recompose withHandlers factory:

    withLifecycle(
      methodsFactory: (initialProps: Object) => Object
    ): HigherOrderComponent
    withLifecycle(
      ({ shouldLoadOnMount }) => {
        if (shouldLoadOnMount) {
          return {
            onDidMount({ setLoading }) {
              setLoading(true, () => {
                setTimeout(() => setLoading(false), 1000);
              })
            }
          };
        }
      }
    )

    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.

    📺 Check out live demo.

    Install

    npm i @hocs/with-lifecycle

    DownloadsWeekly Downloads

    1,013

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • hocs