React HOC Compose

Compose factory components (HOCs) on the go without variable assignment

Why

You may find this useful if you're using React Router v4. The following no longer has "abstract" routes:

<Route component={App}>
  <Route exact path="/" component={AppHome} />
</Route>

If you do, you'll get the following console warning:

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

Instead, the library advices on doing the following:

<App>
  <Route exact path="/" component={AppHome} />
</App>

I use HOCs to apply permissions on each route (the following uses React Router as an example), like so:

<App>
  <Route path="/login" component={Permission.guest(AppLogin)} />

  <Permission.auth(AppMain)>
    <Route path="/" component={AppHome} />
    <Route path="/trash" component={AppHome} />
  </Permission.auth(AppMain)>
</App>

Since <Permission.auth(AppMain)> isn't a valid syntax, we will have to assign it to a variable.

const AppMainWithPermission = Permission.auth(AppMain)

Which gets verbose overtime. What if we could compose it on the go?

<Compose hoc={Permission.auth} component={AppMain}>
  <Route path="/" component={AppHome} />
  <Route path="/trash" component={AppHome} />
</Compose>

How It Works

Compose applies the HOC to the component once, on initial mount.

Installation

npm install @srph/react-hoc-compose --save

Script tags

If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.

<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-hoc-compose/dist/react-hoc-compose.min.js"></script>

This library is exposed as ReactHOCCompose (e.g., <ReactHOCCompose />).

Usage

<Compose hoc={withYolo} component={MyComponent} />

Contributing

npm test

Bundling package

npm run bundle