feat: change hasMore to canLoadMore

BREAKING CHANGE: change `hasMore` to `canLoadMore` which will break older versions
robcalcroft · Apr 23, 2020 · 70b809f · 70b809f
1 parent 54ffc79
commit 70b809f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -23,15 +23,15 @@ import useInfiniteLoader from 'react-use-infinite-loader';
 ```
 Implement the hook. Ensure that the initial content page size flows off the page so that the next page isn't instantly fetched
 ```javascript
-const [hasMore, setHasMore] = React.useState(true);
+const [canLoadMore, setCanLoadMore] = React.useState(true);
 const [data, setData] = React.useState([]);
 const loadMore = React.useCallback((page) => {
   loadFromAPI(page).then(response => {
-    setHasMore(response.hasMore);
+    setCanLoadMore(response.canLoadMore);
     setData(currentData => [...currentData, ...response.data]);
   });
 });
-const { loaderRef } = useInfiniteLoader({ loadMore, hasMore });
+const { loaderRef } = useInfiniteLoader({ loadMore, canLoadMore });
 ```
 Give the `loaderRef` that's returned from the hook to a `div` that sits directly below your rendered content list
 ```javascript
@@ -49,7 +49,7 @@ return (
 | Property     | Default value     | Description                                                                                              |
 |-------------------|-------------------|----------------------------------------------------------------------------------------------------------|
 | loadMore | **required** | Invoked when the user scrolls into the observable viewport + its rootMargin; read about rootMargin and thresholds [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |
-| hasMore | `false` | Tells useInfiniteLoader whether to run `loadMore` when the observer is triggered, this is usually set dynamically. |
+| canLoadMore | `false` | Tells useInfiniteLoader whether to run `loadMore` when the observer is triggered, this is usually set dynamically. |
 | rootMargin        | `"100px 0px 0px 0px"`     | [Read about `rootMargin` here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |
 | threshold         | `0`           | [Read about `threshold` here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |
 | initialise  | `true` | Used for if your data fetching library fetches page 0 and renders it when the component loads, to use this just have a state flag that you set to false once the initial load from your data fetching lib has happened.                                |

diff --git a/example/Example.jsx b/example/Example.jsx
@@ -13,7 +13,7 @@ function getMoreItems(page) {
       const nextPageStart = (page + 1) * pageSize;
       resolve({
         items: exampleData.slice(pageStart, pageStart + pageSize),
-        hasMore:
+        canLoadMore:
           exampleData.slice(nextPageStart, nextPageStart + pageSize).length ===
           pageSize,
       });
@@ -24,12 +24,12 @@ function getMoreItems(page) {
 function App() {
   const [loading, setLoading] = React.useState(false);
   const [items, setItems] = React.useState([]);
-  const [hasMore, setHasMore] = React.useState(true);
+  const [canLoadMore, setCanLoadMore] = React.useState(true);
   const loadMore = React.useCallback((page) => {
     setLoading(true);
     getMoreItems(page).then((response) => {
-      if (response.hasMore !== hasMore) {
-        setHasMore(response.hasMore);
+      if (response.canLoadMore !== canLoadMore) {
+        setCanLoadMore(response.canLoadMore);
       }
       setItems((currentItems) => [...currentItems, ...response.items]);
       setLoading(false);
@@ -44,7 +44,7 @@ function App() {
     loadMore,
 
     // If this is false useInfiniteLoader no longer invokes `loadMore` when it usually does
-    hasMore,
+    canLoadMore,
 
     // Not used in this example. Used if you already load page 0 on mount, you can tell
     // useInfiniteLoader what page to begin loading more from
@@ -91,7 +91,9 @@ function App() {
       {loading === true && (
         <div className="info">Loading page {page + 1}...</div>
       )}
-      {hasMore === false && <div className="info">No more items to load</div>}
+      {canLoadMore === false && (
+        <div className="info">No more items to load</div>
+      )}
     </>
   );
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-use-infinite-loader",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Infinitely load new content in React using a simple React hook",
   "main": "useInfiniteLoader.es5.js",
   "repository": "git@github.com:CurationCorp/react-use-infinite-loader.git",

diff --git a/useInfiniteLoader.es5.js b/useInfiniteLoader.es5.js
@@ -25,8 +25,8 @@ function useInfiniteLoader(_ref) {
   var _ref$initialPage = _ref.initialPage,
       initialPage = _ref$initialPage === void 0 ? 0 : _ref$initialPage,
       loadMore = _ref.loadMore,
-      _ref$hasMore = _ref.hasMore,
-      hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+      _ref$canLoadMore = _ref.canLoadMore,
+      canLoadMore = _ref$canLoadMore === void 0 ? false : _ref$canLoadMore,
       _ref$initialise = _ref.initialise,
       initialise = _ref$initialise === void 0 ? true : _ref$initialise,
       _ref$rootMargin = _ref.rootMargin,
@@ -54,7 +54,7 @@ function useInfiniteLoader(_ref) {
           return;
         }
 
-        if (hasMore === false) {
+        if (canLoadMore === false) {
           return;
         }
 
@@ -76,7 +76,7 @@ function useInfiniteLoader(_ref) {
         observer.current = undefined;
       }
     };
-  }, [hasMore, loadMore, page, initialise]);
+  }, [canLoadMore, loadMore, page, initialise]);
 
   return {
     loaderRef: loaderRef,

diff --git a/useInfiniteLoader.js b/useInfiniteLoader.js
@@ -3,7 +3,7 @@ import React from "react";
 export default function useInfiniteLoader({
   initialPage = 0,
   loadMore,
-  hasMore = false,
+  canLoadMore = false,
   initialise = true,
   rootMargin = "100px 0px 0px 0px",
   threshold = 0,
@@ -23,7 +23,7 @@ export default function useInfiniteLoader({
           if (target.intersectionRatio <= 0) {
             return;
           }
-          if (hasMore === false) {
+          if (canLoadMore === false) {
             return;
           }
           loadMore(page.current);
@@ -41,6 +41,6 @@ export default function useInfiniteLoader({
         observer.current = undefined;
       }
     };
-  }, [hasMore, loadMore, page, initialise]);
+  }, [canLoadMore, loadMore, page, initialise]);
   return { loaderRef, page: page.current };
 }