@withvoid/melting-pot/docs/hoc/withCompose.mdx

A react utility library

---
name: withCompose
menu: HOCs
---

import { Playground } from 'docz';
import { withCompose } from '../../src';

# withCompose

```
withCompose(withA, withB)(App);
```

## How does this help?

Suppose you have two higher order components e.g, `withA` & `withB`, `withC`, `withD`
that you want to use for your component called `App`, you will have to use
it something like below

```
export default withA(withB(withC(withD(App))));
```

The above example is not very elegant, I honestly forget the count of all the
closing brackets,

Solution for this would be using `withCompose` that takes in all the `hocs` & makes
it use like below

```
export default withCompose(withA, withB, withC, withD)(App);
```

I find the later solution a bit neat & elegant. Easy on the eyes. Here is an
example below.

## Examples

<Playground>
  {() => {
    const withA = BaseComponent => {
      return class HOC extends React.Component {
        constructor() {
          super();
          this.state = {
            a: 'awesome',
          };
        }
        render() {
          const { a } = this.state;
          return <BaseComponent a={a} {...this.props} />;
        }
      };
    };

    const withB = BaseComponent => {
      return class HOC extends React.Component {
        constructor() {
          super();
          this.state = {
            b: 'cooler',
          };
        }
        render() {
          const { b } = this.state;
          return <BaseComponent b={b} {...this.props} />;
        }
      };
    };

    const App = props => {
      const { a, b } = props;
      return (
        <div>
          <p>a is {a}</p>
          <p>b is {b}</p>
        </div>
      );
    };

    const Enhancer = withCompose(withA, withB)(App);
    return <Enhancer />

}}

</Playground>

## API

- withCompose(...functions) Array of functions