@thibault.sh/hooks/dist/useScrollPosition.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useScrollPosition.ts"],"names":["useScrollPosition","scrollPosition","setScrollPosition","useState","useEffect","handleScroll"],"mappings":"uCAsCO,SAASA,CAAAA,EAAoC,CAClD,GAAM,CAACC,CAAgBC,CAAAA,CAAiB,CAAIC,CAAAA,QAAAA,CAAyB,CACnE,CAAG,CAAA,OAAO,MAAW,EAAA,WAAA,CAAc,MAAO,CAAA,OAAA,CAAU,CACpD,CAAA,CAAA,CAAG,OAAO,MAAW,EAAA,WAAA,CAAc,MAAO,CAAA,OAAA,CAAU,CACtD,CAAC,CAAA,CAED,OAAAC,SAAAA,CAAU,IAAM,CACd,GAAI,OAAO,MAAA,EAAW,WAAa,CAAA,OAEnC,IAAMC,CAAAA,CAAe,IAAM,CACzBH,CAAAA,CAAkB,CAChB,CAAA,CAAG,OAAO,OACV,CAAA,CAAA,CAAG,MAAO,CAAA,OACZ,CAAC,EACH,CAAA,CAEA,OAAO,MAAA,CAAA,gBAAA,CAAiB,QAAUG,CAAAA,CAAY,CAC9CA,CAAAA,CAAAA,GAEO,IAAM,MAAA,CAAO,mBAAoB,CAAA,QAAA,CAAUA,CAAY,CAChE,CAAA,CAAG,EAAE,EAEEJ,CACT","file":"useScrollPosition.mjs","sourcesContent":["import { useState, useEffect } from \"react\";\n\ninterface ScrollPosition {\n  x: number;\n  y: number;\n}\n\n/**\n * Hook that tracks the current window scroll position in real-time.\n *\n * Automatically updates when the user scrolls and handles SSR scenarios\n * by safely checking for window availability.\n *\n * @returns An object containing:\n *   - `x`: Horizontal scroll position in pixels\n *   - `y`: Vertical scroll position in pixels\n *\n * @example\n * ```tsx\n * function ScrollIndicator() {\n *   const { x, y } = useScrollPosition();\n *\n *   return (\n *     <div className=\"scroll-info\">\n *       <p>Horizontal: {x}px</p>\n *       <p>Vertical: {y}px</p>\n *       {y > 100 && (\n *         <button onClick={() => window.scrollTo(0, 0)}>\n *           Back to Top\n *         </button>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n *\n * @see https://thibault.sh/hooks/use-scroll-position\n */\nexport function useScrollPosition(): ScrollPosition {\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    x: typeof window !== \"undefined\" ? window.scrollX : 0,\n    y: typeof window !== \"undefined\" ? window.scrollY : 0,\n  });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleScroll = () => {\n      setScrollPosition({\n        x: window.scrollX,\n        y: window.scrollY,\n      });\n    };\n\n    window.addEventListener(\"scroll\", handleScroll);\n    handleScroll();\n\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  return scrollPosition;\n}\n"]}