eslint-plugin-react-use-props

eslint-plugin-react-use-props

ESLint plugin to require or deprecate props that components use

Installation

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install eslint-plugin-react-use-props:

# npm
npm install eslint-plugin-react-use-props --save-dev

# yarn
yarn add eslint-plugin-react-use-props --dev

Usage

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

{
  "plugins": ["react-use-props"]
}

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

{
  "rules": {
    "react-use-props/require": [2,
      { "element": "img", "props": ["width", "height"] }
    ],
    "react-use-props/deprecate": [2,
      { "element": "div", "props": ["align"] }
    ]
  }
}

Recomended rules

Force required size props to prevent Layout Shift from occurring.

{
  "rules": {
    "react-use-props/require": [2,
      { "element": "img", "props": ["width", "height"] },
      { "element": "iframe", "props": ["width", "height"] }
    ]
  }
}

Supported Rules

• eslint-plugin-react-use-props/require: Check required component props
• eslint-plugin-react-use-props/deprecate: Check deprecated component props

Changelog

1.0.0 (18.06.2021)

• init