hocompose

A library to compose higher-order components into one.

Note: 1.0.0 is a rewrite

Higher-order components

Using Higher-Order Components (HOCs) in React is great for composition. They allow to decouple rendering logic from life-cycle logic. HOCs are good for extracting logic from components, so it can be applied to other components without duplicating code.

Sharing a specific component behaviour between many components is easy with higher-order components. However, because of nesting, adding multiple behaviours to a component is done at the expense of component instances.

Composition

Nesting rendering logic makes total sense, this is how one builds a UI consisting of a tree of components. But, why should one follow the same pattern to add a series of behaviours to a component?

This is what hocompose enables: composing behaviours together in only one higher-order component. Think of it as the best of higher-order components, decorators and mixins.

Installation and usage

npm install --save hocompose

import compose from 'hocompose';
import pure from 'hocompose/behaviours/pure';
import setContext from 'hocompose/behaviours/setContext';
import getContext from 'hocompose/behaviours/getContext';

Key concepts

• Only functions with closures, hocompose is thisless
• State values are serialised to props
• componentWillMount and componentDidMount functions can both return functions executed in componentWillUnmount

Docs

• Behaviours
  • Overview
  • API
  • Composition
• Examples
  • Event subscription
  • Event handlers
  • Redux store subscription

Quick example

import React from 'react';
import compose from 'hocompose';
import pure from 'hocompose/behaviours/pure';

const windowSizeBehaviour = (model) => {
    const buildState = () => ({
        width: window.innerWidth,
        height: window.innerHeight
    });

    return {
        state: buildState(),
        componentDidMount(model, setState) {
            const resizeHandler = () => setState(buildState());
            
            window.addEventListener('resize', resizeHandler);

            // Return an unmount function
            return () => window.removeEventListener('resize', resizeHandler);
        }
    };
};

const MyView = (props) => <div>This is my view, { props.width }x{ props.height }</div>;

export default compose(pure, windowSizeBehaviour)(MyView);