Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
// 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 (
{value => <Component {...{...props, [prop]: value, ref}} />}
const upperProp = prop.slice(0, 1).toUpperCase() + prop.slice(1)
const componentName = Component.displayName ||
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,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment