TypeScript icon, indicating that this package has built-in type declarations

4.11.2 • Public • Published


Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

npm install rooks


yarn add rooks

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!


Build Status


Visibility sensor hook for React.


npm install --save @rooks/use-visibility-sensor

Importing the hook

import useVisibilitySensor from "@rooks/use-visibility-sensor"


function Demo() {
    const rootNode = useRef(null);
    const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, {
        intervalCheck: false,
        scrollCheck: true,
        resizeCheck: true
    return (
        <div ref={rootNode}>
            {isVisible ? "Visible" : isVisible === null ? "Null" : "Not Visible"}


It checks whether an element has scrolled into view or not. A lot of the logic is taken from react-visibility-sensor and is rewritten for the hooks proposal.

Note: This is using the new React Hooks API Proposal which is subject to change until React 16.7 final.

You'll need to install react, react-dom, etc at ^16.7.0-alpha.0


Image from Gyazo

Returned Object keys

Returned object attributes Type Description
isVisible Boolean Is Ref visible or not
visibilityRect Object VisibilityRectangle containing coordinates of the container


The first argument of the useVisibilitySensor hook is a ref, the second argument is an options object. The available options are as follow:

intervalCheck: false - Accepts int | bool, if an int is supplied, that will be the interval in ms and it keeps checking for visibility

partialVisibility: false - Accepts bool | string : Tells the hook if partial visibility should be considered as visibility or not. Accepts false and directions top, bottom, left and right

containment: null - A DOMNode element which defaults to window. The element relative to which visibility is checked against

scrollCheck: true - A bool to determine whether to check for scroll behavior or not

scrollDebounce: 250 - The debounce ms for scroll

scrollThrottle: -1 - The throttle ms for scroll. If throttle > -1, debounce is ignored.

resizeCheck: false - A bool to determine whether to check for resize behavior or not

resizeDebounce: 250 - The debounce ms for resize

resizeThrottle: -1 - The throttle ms for resize. If throttle > -1, debounce is ignored.

shouldCheckOnMount: true - A bool which determines whether an initial check on first render should happen or not.

minTopValue: 0 - An int top value to determine what amount of top visibility should be considered for visibility


  • [x] Init
  • [x] Scroll and Resize support
  • [x] Debounce and throttling
  • [x] Option to opt-out of initial check on mount
  • [x] Documentation of all options
  • [x] Tests _ WIP _
  • [ ] More examples _ WIP _

Package Sidebar


npm i @rooks/use-visibility-sensor

Weekly Downloads






Unpacked Size

23.5 kB

Total Files


Last publish


  • imbhargav5