You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a hook to create infinite scroll components!
8
-
**Live demo is [here](https://onderonur.github.io/react-infinite-scroll-hook/).**
10
+
**Live demo is [here](https://onderonur.github.io/react-infinite-scroll-hook/).**
9
11
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.
12
+
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
13
12
14
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
15
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).
@@ -70,6 +72,7 @@ function SimpleInfiniteList() {
70
72
```
71
73
72
74
Or if we have a scrollable container and we want to use it as our "list container" instead of `document`, we just need to use `rootRef` like:
@@ -83,7 +86,7 @@ function InfiniteListWithVerticalScroll() {
83
86
});
84
87
85
88
return (
86
-
<ListContainer
89
+
<ListContainer
87
90
// This where we set our scrollable root component.
88
91
ref={rootRef}
89
92
>
@@ -105,14 +108,15 @@ function InfiniteListWithVerticalScroll() {
105
108
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.
106
109
107
110
## Arguments
108
-
| Name | Description | Type | Optional | Default Value |
0 commit comments