Search code examples
reactjstypescriptmouseeventeslint

Disallow MouseEvent with ESLint (Typescript)

I am trying to enforce a rule to disallow things like this:

const submit = (event: React.MouseEvent) => {};

and instead do this:

const submit: React.MouseEventHandler = (event) => {};

I tried with something like this:

"no-restricted-imports": ["error", {
  "paths": [{
    "name": "react",
    "importNames": ["MouseEvent"],
    "message": "Please use MouseEventHandler."
  }]
}]

But it only works if I do this:

import { MouseEvent } from 'react';

If people use it like this: React.MousEvent ESLint doesn't error. Any ideas?

Solution

  • You could use ESLint rule called typescript-eslint/ban-types

    You can add this in your .eslintrc.js file

    "@typescript-eslint/ban-types": ["error",
    {
        "types": {
            "React.MouseEvent": { "message": "Please avoid using React.MouseEvent" }
        },
        "extendDefaults": true
    }
],