React: Compose HOCs on-the-go without variable assignment (https://github.com/srph/react-hoc-compose)

readme.md

Why

Since we do permissions this way:

<App>
  <Route path="/login" component={Permission.guest(AppLogin)} />

  <Permission.auth(AppMain)>
    <Route path="/" component={AppHome} />
    <Route path="/trash" component={AppHome} />
  </Permission.auth(AppMain)>
</App>

And that <Permission.auth(AppMain)> isn't a valid syntax, we may have to make assign it to a variable.

const AppMainWithPermission = Permission.auth(AppMain)

which can get verbose. What if we could compose it on the go?

<Compose hoc={Permission.auth} component={AppMain}>
</Compose>

Installing

See react-hoc-compose.

index.js

import React, {cloneElement} from 'react'

/**
 * Make it easier to apply HOC to a component
 * without having to assign it to a variable
 */
class Compose extends React.Component {
  applied = this.props.hoc(this.props.component)

  render() {
    const {hoc, component, ...props} = this.props
    const Applied = this.applied
    return <Applied {...props} />
  }
}

export default Compose