eslint-plugin-react-web-api

eslint-plugin-react-web-api

ESLint React's ESLint plugin for React to interact with Web APIs.

Install

# npm
npm install --save-dev eslint-plugin-react-web-api

Setup

Add the plugin to your eslint.config.js:

// @ts-check

import js from "@eslint/js";
import reactWebAPI from "eslint-plugin-react-web-api";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    plugins: [
      "react-web-api": reactWebAPI,
      rules: {
        // react-web-api recommended rules
        "react-web-api/no-leaked-timeout": "error",
        "react-web-api/no-leaked-interval": "error",
        "react-web-api/no-leaked-event-listener": "error",
        "react-web-api/no-leaked-resize-observer": "error",
      }
    ],
  },
];

Rules

Rule	Description	💼	💭
no-leaked-timeout	Prevents leaked setTimeout	✔️
no-leaked-interval	Prevents leaked setInterval	✔️
no-leaked-idle-callback	Prevents leaked requestIdleCallback	✔️		🚧
no-leaked-animation-frame	Prevents leaked requestAnimationFrame	✔️		🚧
no-leaked-event-source	Prevents leaked EventSource	✔️		🚧
no-leaked-event-listener	Prevents leaked addEventListener	✔️
no-leaked-resize-observer	Prevents leaked ResizeObserver	✔️
no-leaked-intersection-observer	Prevents leaked IntersectionObserver	✔️		🚧
no-leaked-mutation-observer	Prevents leaked MutationObserver	✔️		🚧
no-leaked-performance-observer	Prevents leaked PerformanceObserver	✔️		🚧
no-leaked-websocket	Prevents leaked WebSocket	✔️		🚧
no-leaked-broadcast-channel	Prevents leaked BroadcastChannel	✔️		🚧
no-leaked-geolocation	Prevents leaked Geolocation.watchPosition()	✔️		🚧
no-leaked-absolute-orientation-sensor	Prevents leaked AbsoluteOrientationSensor	✔️		🚧
no-leaked-relative-accelerometer	Prevents leaked Accelerometer	✔️		🚧
no-leaked-ambient-light-sensor	Prevents leaked AmbientLightSensor	✔️		🚧
no-leaked-gravity-sensor	Prevents leaked GravitySensor	✔️		🚧
no-leaked-gyroscope	Prevents leaked Gyroscope	✔️		🚧
no-leaked-linear-acceleration-sensor	Prevents leaked LinearAccelerationSensor	✔️		🚧
no-leaked-magnetometer	Prevents leaked Magnetometer	✔️		🚧
no-leaked-orientation-sensor	Prevents leaked OrientationSensor	✔️		🚧

Changelog

v1.13.0 (2024-09-04)

✨ New

• Added web-api/no-leaked-resize-observer rule to prevent leaked ResizeObserver

🐞 Fixes

• hooks-extra/no-redundant-custom-hook should allow custom Hooks with empty body

🪄 Improvements

• Rename debug/react-hooks to debug/hook
• Rename hooks-extra/ensure-custom-using-hooks to hooks-extra/no-redundant-custom-hook
• Rename hooks-extra/ensure-use-memo-has-non-empty-deps to hooks-extra/no-unnecessary-use-memo
• Rename hooks-extra/ensure-use-callback-has-non-empty-deps to hooks-extra/no-unnecessary-use-callback
• Upgrade @typescript-eslint's packages to ^8.4.0

(The rules that were renamed in this release will still be available until the next major update to avoid breaking changes.)