eslint-plugin-react-hook-form

eslint-plugin-react-hook-form

react-hook-form is an awesome library which provide a neat solution for building forms. However, there are many rules for the API which may be missed by the developer. This plugin aims to check those rules automatically through ESLint. Thus brings better DX for react-hook-form.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-react-hook-form:

$ npm install eslint-plugin-react-hook-form --save-dev

Usage

Add react-hook-form to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["react-hook-form"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "react-hook-form/destructuring-formstate": "error"
  }
}

or start with the recommended rule set:

{
  "extends": "plugin:react-hook-form/recommended"
}

Supported Rules

Rule	Description	Recommended	Fixable
destructuring-formstate	Use destructuring assignment to access the properties of formState.	⛔️
no-access-control	Avoid accessing the properties of control	⛔️
no-nested-object-setvalue	Avoid nested object in second argument of setValue	⛔️	🔧
no-use-watch	Avoid using watch

Key

Icon	Description
⛔️	Reports as error in recommended configuration
⚠️	Reports as warning in recommended configuration
🔧	Rule is fixable with eslint --fix

License

MIT

Changelog

0.3.1 (2025-05-11)

Features

• no-use-watch: Add rule prohibiting use of watch (#26) (efd04ce)