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

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

{"version":3,"sources":["../src/hooks/useWindowSize.ts"],"names":["useWindowSize","windowSize","setWindowSize","useState","useEffect","handleResize"],"mappings":"uCAcO,SAASA,CAAAA,EAA4B,CAC1C,GAAM,CAACC,CAAYC,CAAAA,CAAa,CAAIC,CAAAA,QAAAA,CAAqB,CACvD,KAAO,CAAA,OAAO,MAAW,EAAA,WAAA,CAAc,MAAO,CAAA,UAAA,CAAa,CAC3D,CAAA,MAAA,CAAQ,OAAO,MAAW,EAAA,WAAA,CAAc,MAAO,CAAA,WAAA,CAAc,CAC/D,CAAC,CAAA,CAED,OAAAC,SAAAA,CAAU,IAAM,CACd,GAAI,OAAO,MAAA,EAAW,WAAa,CAAA,OAEnC,IAAMC,CAAAA,CAAe,IAAM,CACzBH,CAAAA,CAAc,CACZ,KAAA,CAAO,OAAO,UACd,CAAA,MAAA,CAAQ,MAAO,CAAA,WACjB,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":"useWindowSize.mjs","sourcesContent":["import { useState, useEffect } from \"react\";\n\ninterface WindowSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Hook that tracks window dimensions\n * @returns Object containing current window width and height\n * @example\n * const { width, height } = useWindowSize();\n * console.log(width, height);\n */\nexport function useWindowSize(): WindowSize {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: typeof window !== \"undefined\" ? window.innerWidth : 0,\n    height: typeof window !== \"undefined\" ? window.innerHeight : 0,\n  });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    handleResize();\n\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  return windowSize;\n} "]}