Flow Typing a Higher Order Component (HoC) While Injecting and Using Child Props

I was recently adding Flow typing to a HoC and ran into a specific use case.  The HoC injected its own function into the child component while also using of the of child props in the injected method.  So here's how to properly flow type it so that consumer of the HoC will enforce the typing of the child.

First, add the type for the prop you will be injecting into the child Second, add the type for the prop you need to use from the child Last, update the HoC wrapper as follows  

Here's what each of those lines is doing:

This is ensuring that for the calling of this HoC, we enforce the typing of the child and add the requirement for our own props. This simply passes along the typing of the child component. This declares that we will return the prop types of the child, minus the injected props we will provide. Putting it all together, here is our final flowtyped HoC.

Leave a Reply

Your email address will not be published. Required fields are marked *