N00b's Programming Machine

    eslint-plugin-react-html-prop-validator

    1.1.2 • Public • Published

    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

    Install

    npm i eslint-plugin-react-html-prop-validator

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    28.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • roxiler-systems