https://github.com/bsonntag/react-use-intersection-observer
React hook for using intersection observers.
https://github.com/bsonntag/react-use-intersection-observer
hook intersection-observer react react-hooks
Last synced: 6 months ago
JSON representation
React hook for using intersection observers.
- Host: GitHub
- URL: https://github.com/bsonntag/react-use-intersection-observer
- Owner: bsonntag
- License: mit
- Created: 2018-10-29T00:01:38.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T12:12:46.000Z (over 2 years ago)
- Last Synced: 2025-03-25T05:51:17.705Z (about 1 year ago)
- Topics: hook, intersection-observer, react, react-hooks
- Language: JavaScript
- Size: 441 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-intersection-observer
React hook for using intersection observers.
## Installation
Using npm:
```sh
$ npm install --save react-use-intersection-observer
```
Using yarn:
```sh
$ yarn add react-use-intersection-observer
```
Since this module uses [React Hooks](https://reactjs.org/docs/hooks-intro.html),
to use this module you'll need to install at least version `16.8.0`
of `react` and `react-dom`:
```sh
$ yarn add react@^16.8.0 react-dom@^16.8.0
```
## Usage
```js
import React, { useRef } from 'react';
import useIntersectionObserver from 'react-use-intersection-observer';
function Example() {
const ref = useRef();
const [intersection] = useIntersectionObserver(ref);
const style = {
background: intersection && intersection.isIntersecting ? 'red' : 'blue',
height: 50,
width: 50
};
return
;
}
```
## API
```js
useIntersectionObserver(Ref, ?Object): Array
```
Receives a ref and an optional object and returns a list of
[intersections](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
reported by an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
## Contributing
Please feel free to submit any issues or pull requests.
## License
MIT