react-pure-lifecycle

react-pure-lifecycle

Add lifecycle methods to your functional components with purity

Installation

$ npm i react-pure-lifecycle --save

Usage

import React from 'react';
import lifecycle from 'react-pure-lifecycle';

// create your lifecycle methods
const componentDidMount = (props) => {
    console.log('I mounted! Here are my props: ', props);
};

// make them properties on a standard object
const methods = {
    componentDidMount
};

const FunctionalComponent = ({children}) => {
    return (
        <div>
            {children}
        </div>
    );
};

// decorate the component
export default lifecycle(methods)(FunctionalComponent);

The complete list of lifecycle methods are supported, minus constructor (if you want to fire something as early as possible, use componentWillMount). The first parameter passed to each lifecycle method is the component's current props, and then all standard parameters for that given lifecycle method follow. For a detailed explanation of each of the methods and the parameters they expect, check the React documentation.

In addition to functional components, you can use this on a standard React class:

import React, {
    Component
} from 'react';
import lifecycle from 'react-pure-lifecycle';

const componentDidUpdate = (props, previousProps) => {
    console.log('I mounted! Here are my props: ', props);
};

const methods = {
    componentDidMount
};

@lifecycle(methods)
class ComponentClass extends Component {
    render() {
        const {
            children
        } = this.props;
        
        return (
            <div>
                {children}
            </div>
        );
    }
}

Not a whole lot of gain here other than the fact that you now have a pure function that you can test independently (no need to create an instance).

Finally, each lifecycle method is also provided as their own decorator, if you just want to bind a single method (receives the method itself instead of an object of methods):

import React from 'react';
import {
    shouldComponentUpdate
} from 'react-pure-lifecycle';

const onlyUpdateIfChanged = (props, nextProps) => {
    return props.children !== nextProps.children;
};

const FunctionalComponent = ({children}) => {
    return (
        <div>
            {children}
        </div>
    );
};

// decorate the component
export default shouldComponentUpdate(onlyUpdateIfChanged)(FunctionalComponent);

Development

Standard stuff, clone the repo and npm install dependencies. The npm scripts available:

• build => run webpack to build unminified JS with NODE_ENV set to development and source map
• build:minifed => run webpack to build minified JS with NODE_ENV set to production
• clean => run rimraf on both lib and dist
• lint => run ESLint against all files in the src folder
• prepublish => runs prepubish:compile
• prepublish:compile => run clean, lint, test, transpile, build, and build-minified
• start => run webpack dev server to run example app (playground!)
• test => run AVA test functions with NODE_ENV=test
• test:coverage => run test with nyc to get output of code coverage
• test:watch => run test, but with persistent watcher
• transpile => run babel against all files in src to create files in lib

Changelog

1.0.1-1.0.2

• README updates