Implement custom useScrollPosition Hook in React

In React applications, monitoring the scroll position is a common requirement for various functionalities like lazy loading, sticky headers, infinite scrolling, animations, etc. Creating a custom useScrollPosition hook can simplify handling scroll events and make the codebase more modular and reusable.

In this blog, we will delve into the code implementation and explanation of the custom useScrollPosition() hook for a solid understanding.

Common use cases

Here are the most common user cases to use the useScrollPosition Hook 

• Sticky headers
• Back-to-top buttons
• Infinite scrolling
• Scroll progress indicators
• Scroll-triggered animations

Code Implementation - useScrollPosition Hook

Let's start by creating a custom useScrollPosition hook in React.

import { useEffect, useState } from "react";

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] =
    useState({
      x: window.scrollX,
      y: window.scrollY,
    });

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition({
        x: window.scrollX,
        y: window.scrollY,
      });
    };

    window.addEventListener(
      "scroll",
      handleScroll
    );

    return () => {
      window.removeEventListener(
        "scroll",
        handleScroll
      );
    };
  }, []);

  return scrollPosition;
}

export default useScrollPosition;

In the code snippet above:

• We define a custom hook useScrollPosition that returns the current scroll position.
• We use the useState hook to maintain the scroll position state.
• We use the useEffect hook to add and remove a scroll event listener.
• The event listener updates the scroll position state whenever the user scrolls.
• We return the updated scroll position.

Using the useScrollPosition Hook

Now let's see how we can use the useScrollPosition hook in a React component.

import useScrollPosition from "./useScrollPosition";

function ScrollTracker() {
  const { x, y } =
    useScrollPosition();

  return (
    <div>
      <h2>
        Scroll X: {x}px
      </h2>

      <h2>
        Scroll Y: {y}px
      </h2>
    </div>
  );
}

export default ScrollTracker;

In this example:

• We import the useScrollPosition hook into our component.
• We call the hook to get the current scroll position.
• We display the scroll position in the component's render.

Other React Custom Hooks to Explore

After mastering the custom useScrollPosition hook, you may want to explore other advanced React topics:

1. 20 Most Asked Custom Hooks in React
2. 100+ Top React JS Questions and Answers