add eslint react-hooks plugin again

Author: Lukas742

examples/vite-ts/eslint.config.mjs

@@ -1,23 +1,20 @@
 import js from '@eslint/js';
 import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    },
+export default tseslint.config({ ignores: ['dist'] }, reactHooksPlugin.configs.flat.recommended, {
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
   },
-);
+  plugins: {
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+});

examples/vite-ts/src/AppShell.tsx

@@ -93,6 +93,9 @@ function AppShell() {
       <ResponsivePopover
         className={classes.popover}
         open={popoverOpen}
+        // The ResponsivePopover needs the ref to the ShellBarItem to position itself correctly.
+        // Since ShellBarItem is abstract and doesn't render a real DOM element, using an id is not efficient.
+        // eslint-disable-next-line react-hooks/refs
         opener={popoverOpenerRef.current}
         onClose={() => {
           setPopoverOpen(false);