Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Compose factory components on the go for incredibly lazy people

Topics

Resources

Releases

No releases published

Packages

No packages published