GUAC-HOC

WrappedComponent = higherOrderComponent1(higherOrderComponent2(WrappedComponent));
...
<WrappedComponent className='myClassName'/>

An example implementation is below. Notice the problem with className. Imagine that, as an end user, I define a component, apply the higher order component, then want to pass in a className prop. This higher order component would intercept it! Note that this is an issue with every prop, including event props such as onClick and onMouseDown. While it is possible to solve this with composition from the library manager's end, this can lead to ugly code and excessive boilerplate.

  function higherOrderComponent1(WrappedComponent) {  
    ...  
    return class WrapperComponent extends React.Component {  
      ...
      render() {
        return (
          /* className is intercepted and overridden, so some user-passed props 
          like className are not propagated to WrappedComponent*/
          <WrappedComponent {...this.props} className='styleClass1'/>
        );
      }
    }
  }

So instead, we let this library handle it.

  function higherOrderComponent(WrappedComponent) {
  ...  
    class WrapperComponent extends React.Component {
      constructor() {
        super();
        //Instead of following ES6 experimental structure, use this to have more java-like declarative syntax.
        this.bindAllMethods();
      }
      ...
      render() {
        return (
                                                     /* \/ Call this to retrieve the composed classNames.*/
          <WrappedComponent {...this.props} className={this.className()}/>
        );
      }
      //This line provides higher-order-component functionality to your components.
      return HOC(WrapperComponent);
    }
  }

npm install --save guac-hoc@latest

import HOC from 'guac-hoc/lib/HOC';
import Guac from 'guac-hoc/lib/Guac';

Method|Parameters|Returns|Description ---|---|---|--- this.bindAllMethods()|None|None|Use in constructor. Binds all class methods to the instance. this.deleteUsedProps(propNames)|propNames: list<string>|props: object|Removes all props that you do not want exposed to your WrappedComponent.

These methods are special, reserved methods that each map to a prop. If your higher-order component intercepts or passes down any of these props to the WrappedComponent, instead implement the corresponding method and pass it or its return value down instead.

Method|Parameters|Returns|Description ---|---|---|--- this.className()|None|string|Define the calculation for your higher-order component's className here and return it. Call this in render() to get the composed className and pass that value down. this.onClick(event)|event|None|Define onClick prop. Pass prop as a method reference as usual. this.onMouseDown(event)|event|None|Define onMouseDown prop. Pass prop as a method reference as usual. this.onMouseUp(event)|event|None|Define onMouseUp prop. Pass prop as a method reference as usual. this.onMouseEnter(event)|event|None|Define onMouseEnter prop. Pass prop as a method reference as usual. this.onMouseLeave(event)|event|None|Define onMouseLeave prop. Pass prop as a method reference as usual.