Skip to main content

How does it work?

Theer are few things you need to know before you start using hookform-input.

Input type​

To achieve maximum compatibility with UI libraries FormInput is making usage of controlled version of input via useController hook and/or* Context API exposed by react-hook-form.

As everything in apart of some pros there are also cons coming with each decision:

Pros:

  • more flexible API
  • you can use any component that supports value and onChange props (or their equivalents) as input prop.

Cons:

  • using FormProvider might lead to potential performance issues in more complex forms due to more re-renders*

∗ - depends on what variant of FormInput you are using

Smart & Polymorphic approach 🧠​

Have you heard about Smart components?

It's really cool approach - magic 🪄 just happens.

Main purpose of this project is to make this pattern easy to integrate with your current codebase by combining polymoprhic and Smart Component approaches.

Polymorphic components​

In a few words, it is a component that lets us specify which React element we want to use for its root. If you’ve used some UI library, such as Mantine or Material UI, you’ve already encountered a polymorphic component.

Smart components​

According to react-hook-form docs:

"This idea here is that you can easily compose your form with inputs."

However, it's not that easy to achieve in a real-world application. This package is here to help you with that. The example from the docs is working perfectly fine but has some limitations eg. doesn't supports nested component fields. Another problem is lack of typescript support for name field which is really annoying.