This is a compatibility function that converts a React hook into a higher order component that can be used with class components.
// usage for hooks without parameters
const useMeaningOfLife = () => 42
const Message = (props: {meaningOfLife: number}) => {
return <div>{props.meaningOfLife}</div>
}
const withMeaningOfLife = withHook('meaningOfLife', useMeaningOfLife)
const WrappedMessage = withMeaningOfLife(Message)
// displays 42
<WrappedMessage />// usage for hooks with parameters
const useGreeting = (name: string) => `Hello, ${name}!`
const Message = (props: {name: string, greeting: string}) => {
return <div>{props.greeting}</div>
}
const withMeaningOfLife = withHook('greeting', useGreeting)
const WrappedMessage = withMeaningOfLife(Message, props => [props.name])
// displays Hello, John!
<WrappedMessage name="John"/>withHook takes 2 parameters:
name: this is the name of the prop that your component will receive with the hook's returned valuehook: the hook function
withHook returns a higher order component that takes the following parameters:
DynamicComponent: the component that you want to inject new props intomapPropsToHookParameters?: a function that takes in the props provided to the wrapper and return an array of the parameters that will be passed to the hook. This mapper is only required if your hook takes in parameters
