06d8f81401
* pull changes from docs-playground * cleanup, add callout banner * cleanup linting and test fixes * add discussion link Co-authored-by: James M. Greene <JamesMGreene@github.com>
25 lines
708 B
TypeScript
25 lines
708 B
TypeScript
import { useState, useEffect, MutableRefObject, RefObject } from 'react'
|
|
|
|
export function useOnScreen<T extends Element>(
|
|
ref: MutableRefObject<T | undefined> | RefObject<T>,
|
|
options?: IntersectionObserverInit
|
|
): boolean {
|
|
const [isIntersecting, setIntersecting] = useState(false)
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
const observer = new IntersectionObserver(([entry]) => {
|
|
isMounted && setIntersecting(entry.isIntersecting)
|
|
}, options)
|
|
|
|
if (ref.current) {
|
|
observer.observe(ref.current)
|
|
}
|
|
|
|
return () => {
|
|
isMounted = false
|
|
ref.current && observer.unobserve(ref.current)
|
|
}
|
|
}, [Object.values(options || {}).join(',')])
|
|
return isIntersecting
|
|
}
|