Skip to main content
Version: 5.10.0



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


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.


npm install --save rooks

Importing the hook​

import { useInViewRef } from "rooks";


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

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

render(<Demo />);


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


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.