Compose factory components on the go for incredibly lazy people
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
storybook
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
package.json
readme.md
webpack.config.js

readme.md

React HOC Compose npm version Build Status

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