useWindowScroll

Track window scroll position.

https://www.shaktools.com/shak-hooks

Browser

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useWindowScroll } from "@shak-hooks/usehooks";

Source: packages/react/src/useWindowScroll.ts

Signature

signature.ts

export function useWindowScroll(): WindowScrollState

Parameters

No parameters.

Returns

WindowScrollState

Exported Types

types.ts

1export interface WindowScrollState {

2 x: number;

3 y: number;

Implementation

use-window-scroll.ts

1import { useState, useEffect } from "react";

3export function useWindowScroll() {

4 const [state, setState] = useState({ x: 0, y: 0 });

6 useEffect(() => {

7 const handler = () => {

8 setState({ x: window.scrollX, y: window.scrollY });

9 };

11 window.addEventListener("scroll", handler);

12 return () => window.removeEventListener("scroll", handler);

13 }, []);

15 return state;

16}

Google Ads

Usage

example.tsx

1import { useWindowScroll } from "@shak-hooks/usehooks";

3const result = useWindowScroll();

4// result: WindowScrollState

5// Use values directly (React state).