eslint-plugin-react-html-prop-validator

ESLint plugin to avoid invalid props passed to HTML elements

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install npm i eslint-plugin-react-html-prop-validator:

$ npm install eslint-plugin-react-html-prop-validator --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install npm i eslint-plugin-react-html-prop-validator globally.

Usage

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

{
  "plugins": ["react-html-prop-validator"]
}

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

{
  "rules": {
    "react-html-prop-validator/html-no-invalid-prop": 2
  }
}

You can change rule from 2 to 1 which is warning or you can disable with zero.

Rule Details

This rule aims to dissallow invalid html and svg elements in react app.

Examples for incorrect code for this rule:

class Component extends React.Component {
  render() {
    <div onClik={() => console.log("hello")}>Hello world!!</div>;
  }
}
class Component extends React.Component {
  render() {
    <h12 classNamess="">Hello world!!</h12>;
  }
}
class Component extends React.Component {
  render() {
    <button tYpe="">Hello world!!</button>;
  }
}

Examples for correct code for this rule:

class Component extends React.Component {
  render() {
    <div onClick={() => console.log("hello")}>Hello world!!</div>;
  }
}
class Component extends React.Component {
  render() {
    <h12 className="">Hello world!!</h12>;
  }
}
class Component extends React.Component {
  render() {
    <button type="">Hello world!!</button>;
  }
}

Next.js users can follow official documentation on how to configure custom eslint plugins