Documentation

useThrottle

A hook to throttle values and limit how often a function can be called.

Installation

pnpm install @rouf-dev/pantheon-ui

Usage

import { useThrottle } from "@rouf-dev/pantheon-ui";
import { useState } from "react";

export default function ScrollComponent() {
  const [scrollY, setScrollY] = useState(0);
  const throttledScrollY = useThrottle(scrollY, 100);

  const handleScroll = () => {
    setScrollY(window.scrollY);
  };

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

  return <div>Scroll position: {throttledScrollY}px</div>;
}

Parameters

value - The value to throttle
interval - Interval in milliseconds (default: 100)