https://github.com/jamonserrano/react-use-viewability
React hook for tracking component viewability, based on IntersectionObserver
https://github.com/jamonserrano/react-use-viewability
hook intersection-observer react viewability
Last synced: about 1 month ago
JSON representation
React hook for tracking component viewability, based on IntersectionObserver
- Host: GitHub
- URL: https://github.com/jamonserrano/react-use-viewability
- Owner: jamonserrano
- License: mit
- Created: 2019-09-11T19:40:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-03T08:33:34.000Z (over 6 years ago)
- Last Synced: 2026-02-16T22:07:19.902Z (3 months ago)
- Topics: hook, intersection-observer, react, viewability
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-viewability
React hook for tracking component viewability, based on IntersectionObserver.
# Installation
```sh
$ npm install react-use-viewability --save-dev
```
# Usage
The hook accepts the [standard IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Creating_an_intersection_observer) and returns an array containing an `inView` value that always reflects the component's viewability, and an `inViewRef` ref that must be passed to the element you want to track.
Example ([try the live version](https://codesandbox.io/s/great-jones-vywwvm5rn3)):
```js
import React from 'react';
import useViewability from 'react-use-viewability';
const Box = props => {
// Consider the element viewable when at least half of it is in the viewport
const [inView, inViewRef] = useViewability({ threshold: 0.5 });
return (
);
};
export default Box;
```
# License
MIT License