From eb59ec64d84adda2ce87d8e97c4d46e8ff76d8b0 Mon Sep 17 00:00:00 2001 From: KentHHarris Date: Wed, 18 Oct 2023 15:37:23 -0700 Subject: [PATCH 1/2] [Fix] Correctly set scrolled state on first render --- lib/hooks/use-scroll.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/hooks/use-scroll.ts b/lib/hooks/use-scroll.ts index 3c8014e3..cf72b948 100644 --- a/lib/hooks/use-scroll.ts +++ b/lib/hooks/use-scroll.ts @@ -8,6 +8,8 @@ export default function useScroll(threshold: number) { }, [threshold]); useEffect(() => { + window && onScroll(); // Call on first render. This correctly updates the `scrolled` state to `True` if the user's scroll position is greater than the `threshold` during the initial load. + window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, [onScroll]); From 336ff20f390e68d035ad371d140506b42fc5212e Mon Sep 17 00:00:00 2001 From: KentHHarris Date: Wed, 18 Oct 2023 15:41:06 -0700 Subject: [PATCH 2/2] Annotate function for clarity --- lib/hooks/use-scroll.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/hooks/use-scroll.ts b/lib/hooks/use-scroll.ts index cf72b948..e28edda0 100644 --- a/lib/hooks/use-scroll.ts +++ b/lib/hooks/use-scroll.ts @@ -1,5 +1,10 @@ import { useCallback, useEffect, useState } from "react"; +/** + * React hook to observe scroll postion. + * @param threshold {number} The y-axis position to observe. + * @returns {boolean} `True` when the user's vertical scroll position is greater than the `threshold`; otherwise, `False`. + */ export default function useScroll(threshold: number) { const [scrolled, setScrolled] = useState(false);