From 70b809fcbbe20412ffcad4fdb541eb9664bb6000 Mon Sep 17 00:00:00 2001 From: Rob Calcroft Date: Thu, 23 Apr 2020 22:24:28 +0100 Subject: [PATCH] feat: change `hasMore` to `canLoadMore` BREAKING CHANGE: change `hasMore` to `canLoadMore` which will break older versions --- README.md | 8 ++++---- example/Example.jsx | 14 ++++++++------ package.json | 2 +- useInfiniteLoader.es5.js | 8 ++++---- useInfiniteLoader.js | 6 +++--- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index cc08b5b..83c4ce7 100644 --- 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 index 6eca9d9..2206520 100644 --- 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 && (
Loading page {page + 1}...
)} - {hasMore === false &&
No more items to load
} + {canLoadMore === false && ( +
No more items to load
+ )} ); } diff --git a/package.json b/package.json index 657a111..ba31eff 100644 --- 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 index 08d44fd..1805f4c 100644 --- 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 index 4eaa433..f0ce492 100644 --- 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 }; }