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

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.",

README.md

 # react-easy-infinite-scroll-hook
 
+![Test](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/actions/workflows/test.yml/badge.svg)
+[![GZipped size][npm-minzip-svg]][bundlephobia-url]
+[![Version Badge][npm-version-svg]][package-url]
+[![Downloads][downloads-image]][downloads-url]
+
 A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate!
-This hook allows you to create a simple, lightweight components with infinite scrolling, supporting both windowed and scrollable elements.
+This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.
 
 ## Features
 
+
+
 - ⏬ **Universal** - Ability to use all types of scrollable elements or [react-virtualized](https://www.npmjs.com/package/react-virtualized) components
@@ -17,3 +24,3 @@ - 📦 **Support for all loading directions** - You can scroll the component indefinitely in the direction you want or all at once (`up`, `down`, `left`, `right`)
 - 🌳 **Tree-shakeable** - Only include the parts you use
-- 💥 **Lightweight** - Around `~1.5kB`
+- 💥 **Lightweight** - Around `~1.9kB`
 
@@ -31,2 +38,6 @@ ## Install
 
+### Simple Example
+
+[![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-6w9szb)
+
 ```js
@@ -59,2 +70,38 @@ import { useInfiniteScroll } from 'react-easy-infinite-scroll-hook';
 
+### Virtualized Example (react-virtualized)
+
+[![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-virtualized-mdfpyu)
+
+```js
+import { useInfiniteScroll } from 'react-easy-infinite-scroll-hook';
+import { List } from 'react-virtualized';
+
+const VirtualizedInfiniteListComponent = ({ isLoading, items, canLoadMore, next }) => {
+  const { setRef } = useInfiniteScroll({
+    next,
+    rowLength: items.length,
+    hasMore: { down: canLoadMore },
+  });
+
+  return (
+    <List
+      ref={setRef}
+      width={500}
+      height={500}
+      rowHeight={60}
+      rowCount={data.length}
+      rowRenderer={({ key, index, style }) => {
+        const item = data[index];
+
+        return (
+          <div key={key} style={style}>
+            {item}
+          </div>
+        );
+      }}
+    />
+  );
+};
+```
+
 ## API
@@ -70,4 +117,4 @@
 | hasMore | Yes | Whether there are more items to be loaded. Expect object with directions to load `{ up: false, down: false, left: false, right: false }`   | object | |
-| rowLength | | Number of items in a `vertical` list (scroll axis `Y`) | number | |
-| columnLength | | Number of items in a `horizontal` list (scroll axis `X`) | number | |
+| rowLength | Condition | Number of items in a `vertical` list (scroll axis `Y`). Required if you are using `vertical` scroll. | number | |
+| columnLength | Condition | Number of items in a `horizontal` list (scroll axis `X`). Required if you are using `horizontal`. scroll | number | |
 | onScroll | | The callback is called when the container is scrolled: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | Function | |
@@ -89,1 +136,13 @@ | initialScroll | | The initial scroll position of the element, which is applied after the ref has been initialized | object | |
 - Try checking your element and make sure it has a fixed size (the size does not increase after receiving new data, only the size of the scrollbar increases) and the overflow can be scrolled in the right direction.
+
+[package-url]: https://npmjs.org/package/react-easy-infinite-scroll-hook
+[npm-version-svg]: https://img.shields.io/npm/v/react-easy-infinite-scroll-hook.svg
+[npm-minzip-svg]:
+  https://img.shields.io/bundlephobia/minzip/react-easy-infinite-scroll-hook.svg
+[bundlephobia-url]:
+  https://bundlephobia.com/result?p=react-easy-infinite-scroll-hook
+[license-image]: http://img.shields.io/npm/l/react-easy-infinite-scroll-hook.svg
+[license-url]: LICENSE
+[downloads-image]: http://img.shields.io/npm/dm/react-easy-infinite-scroll-hook.svg
+[downloads-url]:
+  http://npm-stat.com/charts.html?package=react-easy-infinite-scroll-hook

No alert changes

Improved metrics

Total package byte prevSize

71580

increased by2.96%

Number of lines in readme file

144

increased by69.41%

No dependency changes