https://github.com/ger86/use-observer-hook
Repository to show the use of the custom hook useObserver that integrates the API Intersection Observer with React.
https://github.com/ger86/use-observer-hook
intersection-observer javascript react react-hook react-hooks reactjs
Last synced: about 1 month ago
JSON representation
Repository to show the use of the custom hook useObserver that integrates the API Intersection Observer with React.
- Host: GitHub
- URL: https://github.com/ger86/use-observer-hook
- Owner: ger86
- License: apache-2.0
- Created: 2019-11-06T14:12:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:15:42.000Z (about 3 years ago)
- Last Synced: 2025-10-11T21:45:15.353Z (6 months ago)
- Topics: intersection-observer, javascript, react, react-hook, react-hooks, reactjs
- Language: JavaScript
- Homepage:
- Size: 3.83 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 👀 useObserver hook
## Description
Project to show how we can integrate the **API Intersection Observer** with React creating a custom hook that allows us to reuse it as many times as we want.
What we will do is take advantage of the API Intersection Observer to load our images in a lazy way as we scroll down. We will integrate this functionality into the hook `useObserver` to use it wherever we need it.
## Hooks used
- `useEffect`
- `useState`
- `useRef`
## To Read More
[Intersection Observer API](https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API)
[Javascript. Intersection Observer](https://medium.com/@ger86/javascript-intersection-observer-1410b743c991)
[React. Intersection Observer hook](https://medium.com/@ger86/react-intersection-observer-hook-e57209493ce2)