react-intersection-visible-hook
React hook to track the visibility of a functional component based on IntersectionVisible Observer.
In the following example we changed the background color of the body depending on the visibility of the blue box.
![](https://github.com/AvraamMavridis/react-intersection-visible-hook/blob/master/demo_gif.gif?raw=true)
Demo and tests are coming
import useVisibility from 'react-intersection-visible-hook'
How to use it
{ const nodeRef = ; const visibility = ; return <div className="App" ref=nodeRef> <h1>Hello</h1> </div> ;}
With options
const options = root: document rootMargin: '0px' threshold: 10 { const nodeRef = ; const visibility = ; return <div className="App" ref=nodeRef> <h1>Hello</h1> <h2>visibilityisIntersecting ? 'Component is visible' : 'Component is hidden' </h2> </div> ;}
The visibility
object contains
boundingClientRect
intersectionRatio
intersectionRect
isIntersecting
rootBounds
target
time
Contribute
Any pull-request is more than welcome 💥 😄
License
MIT