Skip to content

Commit f63489c

Browse files
committed
formatted README.md
1 parent 2ac9ff7 commit f63489c

File tree

1 file changed

+15
-11
lines changed

1 file changed

+15
-11
lines changed

README.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
# react-infinite-scroll-hook
22

33
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4+
45
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
6+
57
<!-- ALL-CONTRIBUTORS-BADGE:END -->
68

79
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/).**
911

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.
1113

1214
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.
1315
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() {
7072
```
7173

7274
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:
75+
7376
```js
7477
function InfiniteListWithVerticalScroll() {
7578
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
@@ -83,7 +86,7 @@ function InfiniteListWithVerticalScroll() {
8386
});
8487

8588
return (
86-
<ListContainer
89+
<ListContainer
8790
// This where we set our scrollable root component.
8891
ref={rootRef}
8992
>
@@ -105,14 +108,15 @@ function InfiniteListWithVerticalScroll() {
105108
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.
106109

107110
## Arguments
108-
| Name | Description | Type | Optional | Default Value |
109-
| ----------- | ----------- | ---- | -------- | ------------- |
110-
| loading | Some sort of "is fetching" info of the request. | boolean || |
111-
| hasNextPage | If the list has more items to load. | boolean || |
112-
| onLoadMore | The callback function to execute when the 'onLoadMore' is triggered. | VoidFunction || |
113-
| rootMargin | We pass this to 'IntersectionObserver'. We can use it to configure when to trigger 'onLoadMore'. | string || |
114-
| disabled | Flag to stop infinite scrolling. Can be used in case of an error etc too. | boolean || |
115-
| delayInMs | How long it should wait before triggering 'onLoadMore'. | number || 100 |
111+
112+
| Name | Description | Type | Optional | Default Value |
113+
| ----------- | ------------------------------------------------------------------------------------------------ | ------------ | -------- | ------------- |
114+
| loading | Some sort of "is fetching" info of the request. | boolean || |
115+
| hasNextPage | If the list has more items to load. | boolean || |
116+
| onLoadMore | The callback function to execute when the 'onLoadMore' is triggered. | VoidFunction || |
117+
| rootMargin | We pass this to 'IntersectionObserver'. We can use it to configure when to trigger 'onLoadMore'. | string || |
118+
| disabled | Flag to stop infinite scrolling. Can be used in case of an error etc too. | boolean || |
119+
| delayInMs | How long it should wait before triggering 'onLoadMore'. | number || 100 |
116120

117121
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
118122
[build]: https://travis-ci.org/user/repo

0 commit comments

Comments
 (0)