diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-15 16:37:16 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-15 17:26:17 +0100 |
| commit | c826ad66df066b90b09009f2f4b83b56d018436e (patch) | |
| tree | 6320b85c7a4fdedf8e4384eaca290c02ea2a71e2 /src/utils/hooks/use-scroll-position/use-scroll-position.ts | |
| parent | 0f38aee374029213a47ef7c29bd164093fe63c85 (diff) | |
refactor(hooks): rewrite useScrollPosition hook
* return the scroll position (both X and Y)
* no longer accepts arguments
* add tests
Diffstat (limited to 'src/utils/hooks/use-scroll-position/use-scroll-position.ts')
| -rw-r--r-- | src/utils/hooks/use-scroll-position/use-scroll-position.ts | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/src/utils/hooks/use-scroll-position/use-scroll-position.ts b/src/utils/hooks/use-scroll-position/use-scroll-position.ts new file mode 100644 index 0000000..e20fda5 --- /dev/null +++ b/src/utils/hooks/use-scroll-position/use-scroll-position.ts @@ -0,0 +1,31 @@ +import { useCallback, useEffect, useState } from 'react'; + +export type ScrollPosition = { + x: number; + y: number; +}; + +const defaultPosition: ScrollPosition = { x: 0, y: 0 }; + +/** + * React hook to retrieve the current scroll position based on window. + * + * @returns {ScrollPosition} The scroll position. + */ +export const useScrollPosition = (): ScrollPosition => { + const [pos, setPos] = useState(defaultPosition); + + const updatePos = useCallback(() => { + setPos({ x: window.scrollX, y: window.scrollY }); + }, []); + + useEffect(() => { + if (typeof window === 'undefined') return undefined; + + window.addEventListener('scroll', updatePos); + + return () => window.removeEventListener('scroll', updatePos); + }, [updatePos]); + + return pos; +}; |
