React hook for tracking component viewability, based on IntersectionObserver
npm install react-use-viewability``sh`
$ npm install react-use-viewability --save-dev
The hook accepts the standard IntersectionObserver options 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):
`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 (
ref={inViewRef}
// Change background color when entering or leaving the viewport
style={{
backgroundColor: inView ? 'green' : 'red',
}}
/>
);
};
export default Box;
``
MIT License