useScroll

React hook to track and manipule the scroll position of a web page.

Add the hook via the CLI:

npm

npx @novajslabs/cli add useScroll

yarn

npx @novajslabs/cli add useScroll

pnpm

pnpm dlx @novajslabs/cli add useScroll

Or copy and paste the code into your project:

TypeScript

import { useState, useLayoutEffect } from "react";

export const useScroll = () => {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });

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

  useLayoutEffect(() => {
    window.addEventListener("scroll", handleScroll);

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

  return { position, scrollTo: window.scrollTo };
};

JavaScript

import { useState, useLayoutEffect } from "react";

export const useScroll = () => {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });

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

  useLayoutEffect(() => {
    window.addEventListener("scroll", handleScroll);

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

  return { position, scrollTo: window.scrollTo };
};

Requirements

React 16.8 or higher

Return values

position

Type: object

Indicates the current scroll position of the window.

position.x

Type: number

The current horizontal scroll position of the window.

position.y

Type: number

The current vertical scroll position of the window.

scrollTo

Type: function

Allows you to scroll to a specified position.

Example

import { useScroll } from "./hooks/useScroll";

const App = () => {
  const { position, scrollTo } = useScroll();

  return (
    <div
      style={{
        height: window.innerHeight,
        width: window.innerWidth,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <p>x: {position.x}</p>
      <p>y: {position.y}</p>
      <button onClick={() => scrollTo({ top: 0, behavior: "smooth" })}>
        Scroll to top
      </button>
    </div>
  );
};

export default App;

Use cases

Here are some use cases where this React hook is useful:

• Track the scroll position to make a header sticky when the user scrolls past a certain point
• Load more content when the user scrolls near the bottom of the page
• Trigger animations based on the user's scroll position
• Highlight navigation items based on the section currently in view
• Show a button that scrolls the user back to the top of the page