https://github.com/simbathesailor/use-intersection-observer
An intersection observer hook for all your purposes
https://github.com/simbathesailor/use-intersection-observer
intersection-observer react-hooks reactjs
Last synced: 3 months ago
JSON representation
An intersection observer hook for all your purposes
- Host: GitHub
- URL: https://github.com/simbathesailor/use-intersection-observer
- Owner: simbathesailor
- License: mit
- Created: 2020-01-18T17:16:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:17:36.000Z (over 2 years ago)
- Last Synced: 2025-01-05T17:09:38.807Z (5 months ago)
- Topics: intersection-observer, react-hooks, reactjs
- Language: TypeScript
- Size: 3.1 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-intersection-observer 🚦🚦
### An intersection observer hook for all your purposes
#### ✅ Built on new flashy Reactjs hooks.
#### ✅ No assumption on the elements you want to observe.
#### ✅ Completely configurable.
#### ✅ < 1kb gzipped
### Installing
If using npm:
```sh
npm i @simbathesailor/use-intersection-observer --save
```
If using yarn:
```sh
yarn add @simbathesailor/use-intersection-observer
```
## Demo
[Demo App](https://ywwpb.csb.app/)
[Full Codesandbox Code](https://codesandbox.io/s/useintersectionobserver-ywwpb)
## Usage
```jsx
import { useIntersectionObserver } from '@simbathesailor/use-intersection-observer';
const defaultVisibilityCondition = (entry: IntersectionObserverEntry) => {
if (entry.intersectionRatio >= 1) {
return true;
}
return false;
};
const defaultOptions = {
rootMargin: '0px 0px 0px 0px',
threshold: '0, 1',
when: true,
visibilityCondition: defaultVisibilityCondition,
};
const App = () => {
const [isVisible, boxElemCallback, rootCallbackRef] = useIntersectionObserver(
defaultOptions
);
return (
See for the visibility of box at bottom of page
Start scroling down to the visibility change!
{isVisible ? 'Box is visible' : 'Box is not visible'}
{isVisible ? 'Box is visible' : 'Box is not visible'}
);
};
```
## Props
| Props | IsMandatory | Type | Default | Description |
| --------------------------- | ----------- | -------- | --------------------------------------- | --------------------------------------------------------------------------- |
| options.rootMargin | No | string | '0px 0px 0px 0px' | rootMargin top, left, bottom, right |
| options.threshold | No | string | '0, 1' | proportion of element intersecting required to trigger the callback |
| options.when | No | boolean | true | The flag which which make the observer active or inactive. |
| options.visibilityCondition | No | Function | (entry) => entry.intersectionRatio >= 1 | Return boolean. It sets visibility to true when this function returns true. |
## Return Data Types and Description
The hook returns an array. Let's say that array name is **Arr**.
| Index | Name | Type | Description |
| ------ | ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------- |
| Arr[0] | isVisible | boolean | Tells whether the target element is visible or not |
| Arr[1] | targetElementRef | Function | The target element ref, add it to target element |
| Arr[2] | rootElementCallbackRef | Function | The root element ref, add it to root element or can just leave it if document is the root |
| Arr[3] | observer | Intersection observer Object | Can be used to un-observe the target. |
## Concept
**Intersection Observer API** has a very good support across browsers . Here is the link for [MDN Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle). You can read about it and understand why it is performant. And the best part is it has a polyfill also : [intersection observer polyfill](https://github.com/w3c/IntersectionObserver)
## Work to do
- TestCases.
* Other examples
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
## Authors
[simbathesailor](https://github.com/simbathesailor)
See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
