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

Comparing version 5.0.1 to 5.0.2

package.json

 {
   "name": "react-infinite-scroll-hook",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "A simple hook to create infinite scroll components",
@@ -40,10 +40,10 @@ "keywords": [
   "scripts": {
-    "attw:check": "attw --pack .",
+    "attw": "attw --pack .",
     "build": "tsup",
     "dev": "tsup --watch",
-    "lint:check": "eslint . --max-warnings 0",
+    "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix --max-warnings 0",
     "prepublishOnly": "npm run build",
-    "publint:check": "publint",
-    "types:check": "tsc"
+    "publint": "publint",
+    "typecheck": "tsc"
   },
@@ -50,0 +50,0 @@ "dependencies": {

README.md

@@ -41,9 +41,9 @@ # react-infinite-scroll-hook
 
-```javascript
+```tsx
 import useInfiniteScroll from 'react-infinite-scroll-hook';
 
-function SimpleInfiniteList() {
+function WindowScroll() {
   const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
 
-  const [sentryRef] = useInfiniteScroll({
+  const [infiniteRef] = useInfiniteScroll({
     loading,
@@ -54,3 +54,3 @@ hasNextPage,
     // It can be reactivated by setting "error" state as undefined.
-    disabled: !!error,
+    disabled: Boolean(error),
     // `rootMargin` is passed to `IntersectionObserver`.
@@ -63,21 +63,10 @@ // We can use it to trigger 'onLoadMore' when the sentry comes near to become
   return (
-    <List>
-      {items.map((item) => (
-        <ListItem key={item.key}>{item.value}</ListItem>
-      ))}
-      {/* 
-          As long as we have a "next page", we show "Loading" right under the list.
-          When it becomes visible on the screen, or it comes near, it triggers 'onLoadMore'.
-          This is our "sentry".
-          We can also use another "sentry" which is separated from the "Loading" component like:
-            <div ref={sentryRef} />
-            {loading && <ListItem>Loading...</ListItem>}
-          and leave "Loading" without this ref.
-      */}
-      {(loading || hasNextPage) && (
-        <ListItem ref={sentryRef}>
-          <Loading />
-        </ListItem>
-      )}
-    </List>
+    <div>
+      <List>
+        {items.map((item) => (
+          <ListItem key={item.key}>{item.value}</ListItem>
+        ))}
+      </List>
+      {hasNextPage && <Loading ref={infiniteRef} />}
+    </div>
   );
@@ -89,11 +78,13 @@ }
 
-```js
-function InfiniteListWithVerticalScroll() {
+```tsx
+import useInfiniteScroll from 'react-infinite-scroll-hook';
+
+function VerticalElementScrollPage() {
   const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
 
-  const [sentryRef, { rootRef }] = useInfiniteScroll({
+  const [infiniteRef, { rootRef }] = useInfiniteScroll({
     loading,
     hasNextPage,
     onLoadMore: loadMore,
-    disabled: !!error,
+    disabled: Boolean(error),
     rootMargin: '0px 0px 400px 0px',
@@ -103,6 +94,3 @@ });
   return (
-    <ListContainer
-      // This where we set our scrollable root component.
-      ref={rootRef}
-    >
+    <Scrollable ref={rootRef}>
       <List>
@@ -112,9 +100,5 @@ {items.map((item) => (
         ))}
-        {(loading || hasNextPage) && (
-          <ListItem ref={sentryRef}>
-            <Loading />
-          </ListItem>
-        )}
       </List>
-    </ListContainer>
+      {hasNextPage && <Loading ref={infiniteRef} />}
+    </Scrollable>
   );
@@ -126,5 +110,5 @@ }
 
-You can find different layout examples **[here](https://github.com/onderonur/react-infinite-scroll-hook/tree/master/example/examples)**. **[Live demo](https://onderonur.github.io/react-infinite-scroll-hook/)** contains all of these cases.
+You can find different layout examples **[here](./apps/demo/src/app/)**. **[Live demo](https://onderonur.github.io/react-infinite-scroll-hook/)** contains all of these cases.
 
-Also, we have more realistinc examples with [swr](https://github.com/onderonur/tmdb-explorer) and [Apollo GraphQL](https://github.com/onderonur/rick-and-morty-graphql) too.
+Also, we have more realistic examples with [SWR](https://github.com/onderonur/next-moviez) and [TanStack Query](https://github.com/onderonur/next-rickql) too.
 
@@ -131,0 +115,0 @@ ## Arguments

No alert changes

Worsened metrics

Total package byte prevSize

14154

-4.7%

Number of lines in readme file

140

-10.26%

No dependency changes