Skip to content

Commit b0d6e21

Browse files
committed
bumped react-intersection-observer-hook version
1 parent bd37c82 commit b0d6e21

File tree

4 files changed

+22
-26
lines changed

4 files changed

+22
-26
lines changed

README.md

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
# react-infinite-scroll-hook
2-
![Build status](https://img.shields.io/github/workflow/status/onderonur/react-infinite-scroll-hook/CI)
2+
3+
![Build status](https://img.shields.io/github/actions/workflow/status/onderonur/react-infinite-scroll-hook/main.yml)
34
![License](https://img.shields.io/npm/l/react-infinite-scroll-hook)
4-
![Version](https://img.shields.io/npm/v/react-infinite-scroll-hook)
5+
![Version](https://img.shields.io/npm/v/react-infinite-scroll-hook)
6+
57
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
68

79
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
@@ -11,7 +13,7 @@
1113
This is a hook to create infinite scroll components!
1214
**Live demo is [here](https://onderonur.github.io/react-infinite-scroll-hook/).**
1315

14-
Basically, we need to set a `sentry` component to trigger infinite loading. When `sentry` becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling `onLoadMore` callback) all with the help of `IntersectionObserver`.
16+
Basically, we need to set a `sentry` component to trigger infinite loading. When `sentry` becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling `onLoadMore` callback) all with the help of `IntersectionObserver`.
1517

1618
`sentry` should be some component which will **not** be unmounted as long as we want to keep the infinite scrolling observer **active**. For example, we can use a "loading" indicator as our sentry. The trick is, because that we want to keep the infinite scrolling observer active as long as there is a **next page**, we need to keep this "loading" component mounted even if we don't have a `loading` flag as `true`. This will also keep our layout more consistent and prevent flickering etc.
1719

@@ -28,13 +30,13 @@ With **v4**, we migrated to use `IntersectionObserver` and created a much more f
2830

2931
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)**.
3032

31-
### Installation
33+
## Installation
3234

3335
```sh
3436
npm install react-infinite-scroll-hook
3537
```
3638

37-
### Simple Example
39+
## Simple Example
3840

3941
```javascript
4042
import useInfiniteScroll from 'react-infinite-scroll-hook';
@@ -113,12 +115,13 @@ function InfiniteListWithVerticalScroll() {
113115
}
114116
```
115117

116-
### Other Examples
117-
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.
118+
## Other Examples
119+
120+
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.
118121

119122
Also, we have more realistinc examples with [swr](https://github.com/onderonur/tmdb-explorer) and [Apollo GraphQL](https://github.com/onderonur/rick-and-morty-graphql) too.
120123

121-
### Arguments
124+
## Arguments
122125

123126
| Name | Description | Type | Optional | Default Value |
124127
| ----------- | ------------------------------------------------------------------------------------------------ | ------------ | -------- | ------------- |
@@ -129,13 +132,6 @@ Also, we have more realistinc examples with [swr](https://github.com/onderonur/t
129132
| disabled | Flag to stop infinite scrolling. Can be used in case of an error etc too. | boolean || |
130133
| delayInMs | How long it should wait before triggering 'onLoadMore' (in milliseconds). | number || 100 |
131134

132-
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
133-
[build]: https://travis-ci.org/user/repo
134-
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
135-
[npm]: https://www.npmjs.org/package/npm-package
136-
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
137-
[coveralls]: https://coveralls.io/github/user/repo
138-
139135
## Contributors ✨
140136

141137
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

package-lock.json

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "4.1.0",
2+
"version": "4.1.1",
33
"license": "MIT",
44
"main": "dist/index.js",
55
"typings": "dist/index.d.ts",
@@ -61,6 +61,6 @@
6161
"typescript": "^4.2.3"
6262
},
6363
"dependencies": {
64-
"react-intersection-observer-hook": "^2.1.0"
64+
"react-intersection-observer-hook": "^2.1.1"
6565
}
6666
}
File renamed without changes.

0 commit comments

Comments
 (0)