https://github.com/mikelpmc/react-intersection-observer
React Intersection Observer hook
https://github.com/mikelpmc/react-intersection-observer
hooks intersection-observer lazy-loading performance react react-hooks web-performance
Last synced: about 1 month ago
JSON representation
React Intersection Observer hook
- Host: GitHub
- URL: https://github.com/mikelpmc/react-intersection-observer
- Owner: mikelpmc
- Created: 2019-09-29T15:35:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T18:54:57.000Z (over 2 years ago)
- Last Synced: 2025-03-20T18:59:35.719Z (about 1 month ago)
- Topics: hooks, intersection-observer, lazy-loading, performance, react, react-hooks, web-performance
- Language: HTML
- Homepage: https://codesandbox.io/embed/react-observer-component-14hrj
- Size: 2.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React intersection Observer
React custom hook that uses the Intersection observer API.
[Codesandbox demo](https://codesandbox.io/embed/react-observer-component-14hrj)
#### Getting started
```shell
npm install react-observer-component
```
#### Usage
```jsx
import React from 'react';
import useObserver from 'react-observer-component';
const MyComponent = () => {
const [isInView, ref] = useObserver();
return (
{isInView && Only shows when is in viewport!
}
);
};
```
#### [Browser support](https://caniuse.com/#feat=mdn-api_intersectionobserver)
##### Author: Mikel Parra |