Returns whether an element intersects with a parent element, using the IntersectionObserver
npm install @kaliber/use-is-intersectingscroll and resize events and even responds to element resizing, which might not trigger these events. IntersectionObserver is supported by most current browsers. If you need wider support, there is a polyfill available through polyfill.io.Using @kaliberjs/build, you can add the following argument to the polyfill() call.
```
{polyfill(['default', 'IntersectionObserver'])}
Without, you can manually add the following script to your page (or include it in your build):
``
https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver
``
yarn add @kaliber/use-is-intersecting
jsx
export default function App() {
const [root, setRoot] = React.useState(null)
const { ref: isIntersectingRef, isIntersecting } = useIsIntersecting({ root, rootMargin: '-10%' })
const { ref: wasIntersectingRef, wasIntersecting } = useWasIntersecting({ root, rootMargin: '-10%' }) return (
{isIntersecting
? 'Is in intersection root element'
: 'Is not in intersection root element'}
{wasIntersecting
? 'Has been in intersection root element'
: 'Has not yet been in intersection root element'}
)
}
`The
useIsIntersecting hook also returns wether an element has been intersecting in the past (wasIntersecting). The main difference with the dedicated useWasIntersecting hook is that the IntersectionObserver doesn't get cleaned up, since the hook still has to track wether the element is currently intersecting. This can be useful if you want to pause an expensive operation, but also want the element to have a reveal animation.`jsx
export default function App() {
const [root, setRoot] = React.useState(null)
const { ref: elementRef, isIntersecting, wasIntersecting } = useIsIntersecting({ root }) return (
{isIntersecting
? 'Is in intersection root element'
: 'Is not in intersection root element'}
)
}
``
This library is not transpiled.