react-g-infinite-scroll
This package is an infinite scroll: component, hook or HOC. You choose!
Installation:
yarn add react-g-infinite-scroll
or
npm install --save react-g-infinite-scroll
Live demo:
http://gri.fo/react-g-infinite-scroll/storybook-static
How to:
Options:
Option | Default | Description |
---|---|---|
expectRef[1] | false |
If this is false , the script will use the window scroll, but if you want to use the infinite scroll in a custom element, you should pass true , then you will receive a ref to add to the element |
fetchMore[2] | - | The function that will be called when need to load the next page |
ignoreScroll[3] | false |
You should use this prop when the data is fetching or wether there is no more data to fetch. When ignoreScroll is true , the infinite scroll stops to watch the scroll |
offset | 0 |
The offset of the scroll to call the fetchMore |
-
Keep in mind that if you want to use scroll in a custom element, instead the window, you need to add classes to activate the scroll (
overflow: "auto | hidden"
and a customheight
) -
Ensure that fetchMore changes only when needed to prevent unnecessary renders https://overreacted.io/a-complete-guide-to-useeffect/#but-i-cant-put-this-function-inside-an-effect
-
When the
ignoreScroll
is updated fromtrue
tofalse
(normally after a fetch), it is a trigger to recalculate if needs a new fetch - This is to solve cases when the content do not fill whole space. Eg: If your content has 200px, but your container has 300px, then we need to fetch one more page
You have three ways to use the infinite scroll package: Hook, Component or HOC.
Hook
Code sample: https://github.com/grifo/react-g-infinite-scroll/tree/develop/stories/hook
How to use the hook with scroll in the window:
const MyComponent = { const fetchMore = return /* CONTENT_HERE */}
If you want to use the scroll in a custom element, you should pass the expectRef: true
to the hook function and it will return a ref:
const ref = return <div ref=ref className=/* SCROLL_STYLES */> /* CONTENT_HERE */ </div>
Component
Code sample: https://github.com/grifo/react-g-infinite-scroll/tree/develop/stories/component
Notice: In the backstage it uses the hook
How to use the hook with scroll in the window:
const MyComponent = { const fetchMore = return <InfiniteScroll fetchMore=fetchMore ignoreScroll=isFetching offset=20 > /* CONTENT_HERE */ </InfiniteScroll> }
If you want to use the scroll in a custom element, you should pass the prop expectRef
as true
to the component, then the children will be a render prop with the ref
to add to your element:
const MyComponent = { const fetchMore = return <InfiniteScroll expectRef fetchMore=fetchMore ignoreScroll=isFetching offset=20 > <div ref=ref className=/* SCROLL_STYLES */> /* CONTENT_HERE */ </div> </InfiniteScroll> }
HOC
Code sample: https://github.com/grifo/react-g-infinite-scroll/tree/develop/stories/hoc
Notice: In the backstage it uses the hook
How to use the hook with scroll in the window:
const MyComponent = /* CONTENT_HERE */ MyComponent
const MyComponentWrapper = { const fetchMore = return <MyComponent infiniteScrollProps= fetchMore ignoreScroll: isFetching offset: 20 /* MY_PROPS_TO_MY_COMPONENT_HERE */ /> }
If you want to use the scroll in a custom element, you should pass the prop expectRef
as true
to the enhanced component. And your component will receive the ref
with the forwardRef
:
const MyComponent = MyComponent
const MyComponentWrapper = { const fetchMore = return <MyComponent infiniteScrollProps= expectRef: true fetchMore ignoreScroll: isFetching offset: 20 /* MY_PROPS_TO_MY_COMPONENT_HERE */ /> }