Reusable react-hook-form input controller component using TypeScript and NativeBase

react-hook-form v7 + TypeScript + NativeBase (or any other UI kit)

Photo by Clément Hélardot on Unsplash

React is cool, TypeScript is awesome, react-hook-form is amazing, NativeBase is … is usable (still looking at).

And how we could merge all of them and also the concept of reusable components. Let’s see.

Imagine we have a simple recovery password form with only one email input and a button.

All the magic is about using generic type. For arrow functions the format is:

const Component = <T,>(props: Props<T>): React.ReactElement => {}

And the final result could have the next look:

Also, it could be used with any other UI Kit, just replace the render function for Contoler inside FormInputController.tsx.