A library to compose higher-order components into one.
Note: 1.0.0 is a rewrite
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.
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.
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';
componentWillMount
and componentDidMount
functions can both return functions executed in componentWillUnmount
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);