Skip to content

Commit acb1ead

Browse files
authored
Update README.md
1 parent 489d47b commit acb1ead

File tree

1 file changed

+9
-6
lines changed

1 file changed

+9
-6
lines changed

README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@
55
<!-- ALL-CONTRIBUTORS-BADGE:END -->
66

77
This is a hook to create infinite scroll components!
8-
It has a really basic logic that solved a lot of problems for me. So, I just wanted to publish it as a package.
9-
108
**Live demo is [here](https://onderonur.github.io/react-infinite-scroll-hook/).**
11-
Also, you can find a more complete usage with **react-apollo** [here](https://github.com/onderonur/movies-app-graphql).
129

13-
Basically; `useInfiniteScroll` hook checks the DOM with an interval and looks at the distance between the bottom of your "infinite" component and the bottom of the window.
14-
You can set `scrollContainer` prop to `parent` if you want to use the scrollable parent of that infinite container and not the window. With this setting, when the parent component is in view, the hook will check the bottom offset and trigger the `onLoadMore` callback if offset is less than `threshold`.
10+
Before **v4**, `useInfiniteScroll` hook would basically check the DOM with an interval and look at the distance between the bottom of your "infinite" component and the bottom of the window. This was a simple solution. But it had its difficulties. It was not so easy to change the layout of your "infinite" component (like creating a chat message box with inverted scrolling etc). It was a requirement to modify the package based on each different use case.
11+
12+
And also, checking the DOM with an interval by using `setInterval` wasn't a sophisticated solution. It was enough, but it had it's limits.
13+
With **v4**, we migrated to use `IntersectionObserver` and created a much more flexible API to support different design. Basically, now we have a little bit more [inversion of control](https://kentcdodds.com/blog/inversion-of-control).
14+
15+
Basically, we need to set a `sentry` component to trigger infinite loading. When `sentry` becomes visible on the screen, or it comes near (based on our config of course), it triggers infinite loading all with the help of `IntersectionObserver`. So, we can make components with different layouts like an inverted scrolling chat message box, horizontal scrolling etc.
16+
17+
**Note:** This package uses `IntersectionObserver` under the hood. You might want to check the browser compatibility from **[here](https://caniuse.com/intersectionobserver)** and if you want to support older browsers, you might need to use a polyfill.
1518

16-
While setting the interval, we use another custom hook named `useInterval` and it makes the `setInterval` declarative. It has been explained by Dan Abramov [here](https://overreacted.io/making-setinterval-declarative-with-react-hooks/).
19+
If you want to use the older version which is using `setInterval`, you can find it **[here](https://github.com/onderonur/react-infinite-scroll-hook/tree/v3)**.
1720

1821
### Installation
1922

0 commit comments

Comments
 (0)