Skip to main content
Version: Next

useInViewRef

About​

Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.

Details​

It returns a ref to observed element, as well as boolean flag - inView that will tell if the element is inside of the viewport / parent element or not. You can also pass a callback that will be fired everytime the Observer will be triggered. To understand the Intersection Observer API better, please check its documentation on MDN.

Installation​

npm install --save rooks

Importing the hook​

import { useInViewRef } from "rooks";

Usage​

function Demo() {
const [myRef, inView] = useInViewRef();

return (
<>
<div
style={{
position: "fixed",
top: 0,
right: 0,
}}
>
<h1>Is rectangle visible - {String(inView)}</h1>
</div>
<div style={{ height: 2000 }}></div>
<div ref={myRef} style={{ height: 300, background: "red" }}></div>
<div style={{ height: 2000 }}></div>
</>
);
}

render(<Demo />);

Arguments​

ArgumentTypeDescriptionDefault ValueRequired
callbackIntersectionObserverCallbackCallback that will be fired when the intersection occursundefinedno
optionsIntersectionObserverInitIntersection Observer config (read more){ root: null,rootMargin: "0px 0px 0px 0px", threshold: [0, 1]}no

Return​

Returns an array with the first element in the array being the callback ref for the React component/element that needs to be observed and a second being the boolean flag that indicates if the element is in viewport.

Return valueTypeDescriptionDefault value
refCallbackRefref for the React component/element that needs to be observed.null
inViewbooleanflag that will indicate if the element is in viewportfalse

Codesandbox Examples​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.