The react-intersection-observer
package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation.
import React from 'react'
import { useInView } from 'react-intersection-observer'
const Component = () => {
const [ref, inView, entry] = useInView({
/* Optional options */
threshold: 0,
})
return (
<div ref={ref}>
<h2>{`Header inside viewport ${inView}.`}</h2>
</div>
)
}
Installation per NPM/Yarn:
npm install react-intersection-observer --save
Hi Bramus, I think your first line in the Component function should be
const {ref, inView, entry} = useInView({})
instead of
const [ref, inView, entry] = useInView({})