react-hook-form-input

react-hook-form-input is a lightweight wrapper component for input elements using React Hook Form. It simplifies the process of creating input elements with validation and error message handling, while also providing performance improvements through the use of React hooks.

Installation

To install react-hook-form-input, simply run:

npm install react-hook-form-input

Usage

Import the Controller and Form components from react-hook-form-input:

import { Controller, Form } from "react-hook-form-input";

Wrap your input elements in a Controller component, and provide it with a name and rules prop:

<Controller
  name="firstName"
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, value } }) => (
    <input onChange={onChange} onBlur={onBlur} value={value} />
  )}
/>

Wrap your forms in a Form component, and provide it with a onSubmit prop:

<Form onSubmit={handleSubmit(onSubmit)}>
  <Controller
    name="firstName"
    rules={{ required: true }}
    render={({ field: { onChange, onBlur, value } }) => (
      <input onChange={onChange} onBlur={onBlur} value={value} />
    )}
  />

  <input type="submit" />
</Form>

Props

Controller Props

• name: The name to register the input element in React Hook Form.

• rules: The validation rules for the input element.

• defaultValue: The default value for the input element.

• render: The render prop to render the input element.

Form Props

• onSubmit: The function to call when the form is submitted.

• defaultValues: The default values for the input elements in the form.

Conclusion

react-hook-form-input simplifies the process of creating input elements with validation and error message handling using React Hook Form. It provides significant performance improvements by leveraging the power of React hooks. Try it out in your project today!