create-react-hoc v0.1.0

create-react-hoc

Handles the trivial boilerplate (hoisting statics, setting display name, etc.) involved with creating a higher order component in React. I was surprised to not find any package for this already on npm, so this tiny utility aims to fill that gap and solve annoying inconsistencies present in varying higher order component implementations.

Installation

yarn add create-react-hoc   # or npm install --save create-react-hoc

Usage

// myExampleWrapper.js
// ----------------------------------------
import React from 'react'
import createReactHOC from 'create-react-hoc'

export default createReactHOC(WrappedComponent => {
  class MyExampleWrapper extends React.Component {
    // do something special in this class
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
  return MyExampleWrapper
})


// MyComponent.js
// ----------------------------------------
import React from 'react'
import withMyWrapper from './myExampleWrapper'

const MyComponent = ({ who }) => <h1>Hello {who}</h1>

export default withMyWrapper(MyComponent)

// The component produced from `withMyWrapper` now has:
// 1) Non-react statics hoisted from `MyComponent`
// 2) A displayName of "MyExampleWrapper(MyComponent)`