Upgrade lint packages.

.eslintrc.js

@@ -1,17 +1,18 @@
 module.exports = {
   parser: "@typescript-eslint/parser",
   extends: [
-    "airbnb",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:jest/recommended",
     // Prettier must go last so that it can turn off other rules
     "prettier",
-    "prettier/react",
+    "prettier/@typescript-eslint",
   ],
   plugins: ["jest"],
   env: {
+    browser: true,
+    node: true,
     "jest/globals": true,
   },
-  rules: {
-    "react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
-  },
 };

package.json

@@ -27,14 +27,12 @@
     "@testing-library/react": "^10.2.1",
     "@types/jest": "^25.2.3",
     "@types/react": "^17.0.0",
-    "@typescript-eslint/parser": "^3.1.0",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^23.13.2",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
+    "@typescript-eslint/parser": "^4.10.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "microbundle": "^0.12.4",

src/index.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import ClickableBox from "./index.tsx";
@@ -258,7 +259,6 @@ describe("disabled", () => {
     const children = "duckduck";
 
     const { getByText } = render(
-      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
       <ClickableBox disabled tabIndex={123} onClick={() => {}}>
         {children}
       </ClickableBox>

src/index.tsx

@@ -1,16 +1,18 @@
 import React from "react";
 
 interface ClickableBoxProps {
-  onClick?: Function;
-  is?:
-    | keyof JSX.IntrinsicElements
-    | React.ComponentClass<any, any>
-    | React.FunctionComponent<any>;
+  onClick?(
+    event:
+      | React.MouseEvent<HTMLElement, MouseEvent>
+      | React.KeyboardEvent<HTMLElement>
+  ): void;
+  is?: keyof JSX.IntrinsicElements | React.ElementType;
   tabIndex?: number;
   onKeyPress?(event: React.KeyboardEvent<HTMLElement>): void;
   disabled?: boolean;
   innerRef?: React.Ref<HTMLElement>;
   // Allow arbitrary props.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
 }
 
@@ -68,6 +70,7 @@ class ClickableBox extends React.Component<ClickableBoxProps> {
       // Prevent `onKeyPress` from being spread since we will call it in
       // `this.onKeyPress` and we don't want the user function to overwrite our
       // behavior.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onKeyPress,
       ...otherProps
     } = this.props;
@@ -91,15 +94,13 @@ class ClickableBox extends React.Component<ClickableBoxProps> {
         // Announce to screen readers that the `ClickableBox` is disabled.
         aria-disabled={disabled ? "true" : undefined}
         ref={innerRef}
-        // eslint-disable-next-line react/jsx-props-no-spreading
         {...otherProps}
       />
     );
   }
 }
 
 function forwardRef(props: ClickableBoxProps, ref?: React.Ref<HTMLElement>) {
-  // eslint-disable-next-line react/jsx-props-no-spreading
   return <ClickableBox innerRef={ref} {...props} />;
 }