Cleanly compose multiple component enhancers together with minimal fuss.
$ yarn add @shopify/react-compose
This module exports a single default function
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.
;;;;// this will be the same as 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.;// We can clean this up greatly using compose;
Differences from other
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
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 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.