https://github.com/srph/react-hoc-compose
Compose factory components on the go for incredibly lazy people
https://github.com/srph/react-hoc-compose
react react-router
Last synced: 3 months ago
JSON representation
Compose factory components on the go for incredibly lazy people
- Host: GitHub
- URL: https://github.com/srph/react-hoc-compose
- Owner: srph
- Created: 2018-01-26T19:03:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T21:15:47.000Z (over 7 years ago)
- Last Synced: 2025-02-27T05:06:07.804Z (4 months ago)
- Topics: react, react-router
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## React HOC Compose [](https://npmjs.com/packages/@srph/react-hoc-compose) [](https://travis-ci.org/srph/react-hoc-compose?branch=master)
Compose factory components (HOCs) on the go without variable assignment
## Why
You may find this useful if you're using [React Router v4](https://github.com/ReactTraining/react-router). The following no longer has "abstract" routes:
```js
```
If you do, you'll get the following console warning:
```
You should not use and in the same route; will be ignored
```
Instead, the library advices on doing the following:
```js
```
I use HOCs to apply permissions on each route (the following uses React Router as an example), like so:
```js
```
Since `` isn't a valid syntax, we will have to assign it to a variable.
```js
const AppMainWithPermission = Permission.auth(AppMain)
```
Which gets verbose overtime. What if we could compose it on the go?
```js
```
## How It Works
`Compose` applies the HOC to the component once, on initial mount.
## Installation
```bash
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.
```html
```
This library is exposed as `ReactHOCCompose` (e.g., ``).
## Usage
```js
```
## Contributing
```
npm test
```
### Bundling package
```
npm run bundle
```