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
;;;;
Key concepts
- Only functions with closures, hocompose is thisless
- State values are serialised to props
componentWillMount
andcomponentDidMount
functions can both return functions executed incomponentWillUnmount
Docs
Quick example
;;; const windowSizeBehaviour = { const buildState = width: windowinnerWidth height: windowinnerHeight ; return state: { const resizeHandler = ; window; // Return an unmount function return window; } ;}; const MyView = <div>This is my view propswidth x propsheight </div>; pure windowSizeBehaviourMyView;