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: about 1 month 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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-26T21:15:47.000Z (almost 7 years ago)
• Last Synced: 2024-09-14T00:39:57.423Z (2 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 [![npm version](https://img.shields.io/npm/v/@srph/react-hoc-compose.svg?style=flat-square)](https://npmjs.com/packages/@srph/react-hoc-compose) [![Build Status](https://img.shields.io/travis/srph/react-hoc-compose.svg?style=flat-square)](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

```