When making a reusable component, you‘ll find that people often like to have the API they‘re most familiar with, so in this lesson we‘ll recreate the withToggle Higher Order Component using our new ConnectedToggle render prop component.
function withToggle(Component) { function Wrapper(props, context) { const {innerRef, ...remainingProps} = props return ( <ConnectedToggle render={toggle => ( <Component {...remainingProps} toggle={toggle} ref={innerRef} /> )} /> ) } Wrapper.displayName = `withToggle(${Component.displayName || Component.name})` Wrapper.propTypes = {innerRef: PropTypes.func} Wrapper.WrappedComponent = Component return hoistNonReactStatics(Wrapper, Component) }
