create-hoc-from-render-prop.js

// handy method to create a Higher Order Component out of a
// Render Prop Component (like a Context.Consumer).
// handles, statics, displayName, refs, and value forwarding

function createHOCFromRenderProp({prop, Consumer}) {
  return Component => {
    function Wrapper(props, ref) {
      return (
        <Consumer>
          {value => <Component {...{...props, [prop]: value, ref}} />}
        </Consumer>
      )
    }
    const upperProp = prop.slice(0, 1).toUpperCase() + prop.slice(1)
    const componentName = Component.displayName || Component.name
    Wrapper.displayName = `with${upperProp}(${componentName})`
    // import hoistNonReactStatics from 'hoist-non-react-statics'
    return hoistNonReactStatics(React.forwardRef(Wrapper), Component)
  }
}

const withToggle = createHOCFromRenderProp({
  prop: 'toggle',
  Consumer: Toggle.Consumer,
})