Compose factory components (HOCs) on the go without variable assignment
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>
Compose
applies the HOC to the component once, on initial mount.
npm install @srph/react-hoc-compose --save
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 />
).
<Compose hoc={withYolo} component={MyComponent} />
npm test
npm run bundle