Nebulous Pumpkin Moons

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

    0.1.6 • Public • Published

    use-intersection-observer 🚦🚦

    An intersection observer hook for all your purposes

    Built on new flashy Reactjs hooks.

    No assumption on the elements you want to observe.

    Completely configurable.

    < 1kb gzipped


    If using npm:

    npm i @simbathesailor/use-intersection-observer --save

    If using yarn:

    yarn add @simbathesailor/use-intersection-observer


    Demo App

    Full Codesandbox Code


    import { useIntersectionObserver } from '@simbathesailor/use-intersection-observer';
    const defaultVisibilityCondition = (entry: IntersectionObserverEntry) => {
      if (entry.intersectionRatio >= 1) {
        return true;
      return false;
    const defaultOptions = {
      rootMargin: '0px 0px 0px 0px',
      threshold: '0, 1',
      when: true,
      visibilityCondition: defaultVisibilityCondition,
    const App = () => {
      const [isVisible, boxElemCallback, rootCallbackRef] = useIntersectionObserver(
      return (
        <div className="App">
          <h1>See for the visibility of box at bottom of page</h1>
          <h2>Start scroling down to the visibility change!</h2>
          <div ref={boxElemCallback} className="box">
            {isVisible ? 'Box is visible' : 'Box is not visible'}
          {isVisible ? 'Box is visible' : 'Box is not visible'}


    Props IsMandatory Type Default Description
    options.rootMargin No string '0px 0px 0px 0px' rootMargin top, left, bottom, right
    options.threshold No string '0, 1' proportion of element intersecting required to trigger the callback
    options.when No boolean true The flag which which make the observer active or inactive.
    options.visibilityCondition No Function (entry) => entry.intersectionRatio >= 1 Return boolean. It sets visibility to true when this function returns true.

    Return Data Types and Description

    The hook returns an array. Let's say that array name is Arr.

    Index Name Type Description
    Arr[0] isVisible boolean Tells whether the target element is visible or not
    Arr[1] targetElementRef Function The target element ref, add it to target element
    Arr[2] rootElementCallbackRef Function The root element ref, add it to root element or can just leave it if document is the root
    Arr[3] observer Intersection observer Object Can be used to un-observe the target.


    Intersection Observer API has a very good support across browsers . Here is the link for MDN Intersection observer. You can read about it and understand why it is performant. And the best part is it has a polyfill also : intersection observer polyfill

    Work to do

    • TestCases.
    • Other examples


    Please read for details on our code of conduct, and the process for submitting pull requests to us.


    We use SemVer for versioning. For the versions available, see the tags on this repository.



    See also the list of contributors who participated in this project.


    This project is licensed under the MIT License - see the file for details


    Thanks goes to these wonderful people (emoji key):

    Anil kumar chaudhary
    Anil kumar Chaudhary

    💻 🤔 🎨 📖 🐛


    npm i @simbathesailor/use-intersection-observer

    DownloadsWeekly Downloads






    Unpacked Size

    56.7 kB

    Total Files


    Last publish


    • anil26