react-easy-infinite-scroll-hook - npm Package Compare versions

Comparing version 1.10.6 to 1.10.7

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "license": "MIT",
@@ -66,4 +66,4 @@ "description": "A react hook for creating simple, fast and lightweight components with infinite scrolling in any direction, supporting both windowed and scrollable elements.",
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.17.12",
@@ -76,8 +76,8 @@ "@babel/preset-typescript": "^7.18.6",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.0",
-    "@types/react": "^18.0.24",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "babel-jest": "^29.2.2",
-    "eslint": "^8.26.0",
+    "@types/jest": "^29.2.2",
+    "@types/react": "^18.0.25",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "babel-jest": "^29.3.1",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
@@ -87,5 +87,5 @@ "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
-    "jest": "^29.2.2",
-    "jest-environment-jsdom": "^29.2.2",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.0.2",
@@ -96,7 +96,7 @@ "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.3",
+    "rollup": "^3.3.0",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
+    "tslib": "^2.4.1",
     "typescript": "^4.8.4"
@@ -103,0 +103,0 @@ },

README.md

@@ -61,3 +61,3 @@ # react-easy-infinite-scroll-hook
     // if you are using the "X-scroll" axis ("left" and "right") use "columnCount" instead
-    // you can also use "rowCount" and "columnCount" if you use "Y-scroll" and "X-scroll" at the same time
+    // you can also use "rowCount" and "columnCount" if you use "Y-scroll" and "X-scroll" at the same time 
     rowCount: items.length,
@@ -202,2 +202,38 @@ // Whether there are more items to load
 
+### How to use it with `react-window`?
+
+> `react-easy-infinite-scroll-hook` works with any DOM element, so just specify the correct container for the `ref` object:
+
+```js
+import React, { useCallback } from 'react';
+import useInfiniteScroll from 'react-easy-infinite-scroll-hook';
+import { FixedSizeList } from 'react-window';
+
+const Component = ({ isLoading, items, canLoadMore, next }) => {
+  const ref = useInfiniteScroll({
+    next,
+    columnCount: items.length,
+    hasMore: { right: canLoadMore },
+  });
+
+  // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
+  const setRef = useCallback((node) => {
+    if(node)
+      ref.current=node._outerRef
+  }, []);
+  
+  return (
+    <FixedSizeList
+      ref={setRef}
+      className="List"
+      width={600}
+      height={500}
+      itemSize={60}
+      itemCount={items.length}
+    >
+      {Row}
+    </FixedSizeList>);
+};
+```
+
 ## Contributing
@@ -204,0 +240,0 @@

No alert changes

Improved metrics

Total package byte prevSize

120783

increased by0.83%

Number of lines in readme file

262

increased by15.93%

No dependency changes