refactor to function component and upgrade dependencies

.gitignore

@@ -8,4 +8,5 @@ dist
 .vscode
 storybook-static/
 coverage/
-yarn-error.log
+yarn-error.log
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/stories/**/*.stories.tsx"
+  ],
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-webpack5'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

eslint.config.js

@@ -0,0 +1,43 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import path from "path";
+import { fileURLToPath } from "url";
+import js from "@eslint/js";
+import tsParser from '@typescript-eslint/parser';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+});
+
+export default [
+    ...compat.extends(
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:storybook/recommended",
+        "prettier"
+    ),
+    {
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+          '@typescript-eslint/prefer-regexp-exec': 'warn',
+          '@typescript-eslint/ban-ts-ignore': 'off',
+          '@typescript-eslint/unbound-method': 'warn',
+        }
+    }
+];

package.json

@@ -9,11 +9,11 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rimraf dist && rollup -c",
-    "prepublish": "yarn build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "prepublishOnly": "yarn build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "codecov": "codecov",
-    "lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
+    "lint": "eslint src/**/*.{ts,tsx,js,jsx}",
     "lint:fix": "yarn lint --fix",
     "prettier:check": "prettier --check 'src/**/*'",
     "prettify": "prettier --write 'src/**/*'",
@@ -42,41 +42,44 @@
     "react": ">=16.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-info": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
-    "@testing-library/react": "^9.2.0",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.1",
-    "@types/storybook__react": "^4.0.2",
-    "@types/throttle-debounce": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.3.2",
-    "@typescript-eslint/parser": "^2.3.2",
+    "@babel/core": "^7.28.3",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-onboarding": "9.1.3",
+    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
+    "@storybook/react-webpack5": "9.1.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@types/throttle-debounce": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.40.0",
+    "@typescript-eslint/parser": "^8.40.0",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-react": "^7.15.0",
-    "husky": ">=1",
-    "jest": "^24.9.0",
-    "lint-staged": ">=8",
-    "prettier": "1.18.2",
-    "react": "^16.10.1",
-    "react-docgen-typescript-loader": "^3.2.1",
-    "react-dom": "^16.10.1",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.26.3",
+    "babel-loader": "^10.0.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "9.1.3",
+    "husky": ">=9.1.7",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
+    "lint-staged": ">=16.1.5",
+    "prettier": "3.6.2",
+    "react": "^19.1.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^19.1.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.48.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-typescript2": "^0.25.2",
-    "ts-jest": "^24.1.0",
-    "typescript": "^3.7.2"
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "9.1.3",
+    "ts-jest": "^29.4.1",
+    "typescript": "^5.9.2",
+    "@eslint/eslintrc": "^3.1.0"
   },
   "dependencies": {
-    "throttle-debounce": "^2.1.0"
+    "throttle-debounce": "^5.0.2"
   },
   "husky": {
     "hooks": {

rollup.config.js

@@ -1,6 +1,8 @@
 import resolve from 'rollup-plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript2';
-import pkg from './package.json';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+const pkg = require('./package.json');
 export default {
   input: './src/index.tsx',
   output: [
@@ -19,6 +21,7 @@ export default {
       format: 'iife',
       sourcemap: true,
       name: 'InfiniteScroll',
+      globals: { 'react': 'React' },
     },
   ],
   external: [...Object.keys(pkg.peerDependencies || {})],

src/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, act } from '@testing-library/react';
 import InfiniteScroll from '../index';
 
 describe('React Infinite Scroll Component', () => {
@@ -77,22 +77,20 @@ describe('React Infinite Scroll Component', () => {
       '.infinite-scroll-component'
     ) as HTMLElement;
 
-    node.dispatchEvent(scrollEvent);
-    jest.runOnlyPendingTimers();
-    expect(setTimeout).toHaveBeenCalledTimes(1);
+    act(() => {
+      node.dispatchEvent(scrollEvent);
+      jest.runOnlyPendingTimers();
+    });
     expect(onScrollMock).toHaveBeenCalled();
   });
 
   describe('When missing the dataLength prop', () => {
     it('throws an error', () => {
-      console.error = jest.fn();
       const props = { loader: 'Loading...', hasMore: false, next: () => {} };
 
-      // @ts-ignore
-      expect(() => render(<InfiniteScroll {...props} />)).toThrow(Error);
-      // @ts-ignore
-      expect(console.error.mock.calls[0][0]).toContain(
-        '"dataLength" is missing'
+      // @ts-expect-error ignore the below error
+      expect(() => render(<InfiniteScroll {...props} />)).toThrow(
+        'mandatory prop "dataLength" is missing. The prop is needed when loading more content. Check README.md for usage'
       );
     });
   });
@@ -115,7 +113,9 @@ describe('React Infinite Scroll Component', () => {
       const node = container.querySelector(
         '.infinite-scroll-component'
       ) as HTMLElement;
-      node.dispatchEvent(scrollEvent);
+      act(() => {
+        node.dispatchEvent(scrollEvent);
+      });
       expect(queryByText('Loading...')).toBeFalsy();
     });
 
@@ -137,7 +137,9 @@ describe('React Infinite Scroll Component', () => {
       const node = container.querySelector(
         '.infinite-scroll-component'
       ) as HTMLElement;
-      node.dispatchEvent(scrollEvent);
+      act(() => {
+        node.dispatchEvent(scrollEvent);
+      });
       expect(getByText('Loading...')).toBeTruthy();
     });
   });