@shopify/react-compose

@shopify/react-compose

Cleanly compose multiple component enhancers together with minimal fuss.

Installation

$ yarn add @shopify/react-compose

Usage

This module exports a single default function compose.

import compose from '@shopify/react-compose';

This function can be called on a list of component enhancers (Higher Order Components) to return a single master component enhancer that adds all of the props from all of the enhancers you gave it.

import {withRouter} form 'react-router';
import compose from '@shopify/react-compose';
import {withMousePosition} from './mouse-position';

const enhancer = compose(
  withRouter,
  withMousePosition,
);

class SomeComponent extends React.Component {
 ...
}

// this will be the same as withRouter(withMousePosition(SomeComponent))
export default compose(withRouter, withMousePosition)(SomeComponent);

This enhancer will act roughly the same as calling each enhancer in turn. This can save a lot of boilerplate for cases where each enhancer comes from it's own factory with config.

// In this example each enhancer is actually a factory that takes config.
const EnhancedComponent = enhancerOne(someConfig)(
  enhancerTwo(otherConfig)(enhancerThree(moreConfig)(Component)),
);

// We can clean this up greatly using compose
const EnhancedComponent = compose(
  enhancerOne(someConfig),
  enhancerTwo(otherconfig),
  enhancerThree(moreConfig),
)(Component);

Differences from other compose implementations

Apollo, Redux, and Recompose also export their own compose function. This can be perfectly fine for many usecases, however, this implementation has some advantages (in our opinions).

Standalone

If you are not using Apollo, Redux, or Recompose, you could still have other enhancers you want to combine. This library is only a few lines long and only depends on hoist-non-react-statics (with a peer-dependency on React), so you can relatively weightlessly add it to your project even if you are dependency light.

Less cumbersome Typescript implementation

The Typescript definition for other compose functions takes a number of generic parameters equal to the number of enhancers you pass in. This means you can easily end up with something like

compose<Props & FooProps & BarProps, Props & FooProps, Props>(
  FooEnhancer,
  BarEnhancer,
)(Component);

which is difficult to maintain and understand. It's usually fine from a consumers perspective to just define the output props for these types of statements, and the definition for compose from this package can be used in this scenario with significantly less type annotations.

compose<Props>(FooEnhancer, BarEnhancer)(Component);

Static hoisting

Apollo's compose function does not hoist static members. If you want to do something like make subcomponents available as static members you would need to attach them manually to the enhanced version of the component.

With this implementation you can be sure any static properties on your classical components will be hoisted up to the wrapper Component.