Navigation -
{"↑"},
{"↓"},
{"<-"} and
{"->"}
@@ -35,3 +49,24 @@ export function Home() {
>
)
}
+
+function useScrollThreshold({ threshold }: { threshold: number }) {
+ const [passed, dispatch] = React.useReducer((_prevPassed: boolean, passed: boolean) => {
+ return passed
+ }, false)
+
+ React.useEffect(() => {
+ function handleScroll() {
+ if (window.scrollY > threshold) {
+ return dispatch(true)
+ }
+
+ dispatch(false)
+ }
+ window.addEventListener("scroll", handleScroll)
+
+ return () => window.removeEventListener("scroll", handleScroll)
+ }, [threshold, dispatch])
+
+ return passed
+}
diff --git a/packages/demo/src/components/PageSlide.tsx b/packages/demo/src/components/PageSlide.tsx
index 50fe237..cf42663 100644
--- a/packages/demo/src/components/PageSlide.tsx
+++ b/packages/demo/src/components/PageSlide.tsx
@@ -1,7 +1,7 @@
import * as React from "react"
-import { RefObject } from "react"
import { Branch, useFocusable, useFocusManager } from "react-sunbeam"
import { useMergedRef } from "../apps/utils/useMergedRef.js"
+import { useIntersectionObserver } from "./useIntersectionObserver.js"
export const PageSlide = React.forwardRef(function PageSlide(
{
@@ -70,25 +70,3 @@ export const PageSlide = React.forwardRef(function PageSlide(
)
})
-
-function useIntersectionObserver
(
- ref: RefObject,
- percentage: number,
- callback: (isIntersecting: boolean) => void
-) {
- React.useEffect(() => {
- if (!ref.current) return
-
- const intersectionObserver = new IntersectionObserver(
- (entries) => {
- const entry = entries[0]
- callback(entry.isIntersecting)
- },
- { threshold: percentage }
- )
-
- intersectionObserver.observe(ref.current)
-
- return () => intersectionObserver.disconnect()
- }, [ref, callback, percentage])
-}
diff --git a/packages/demo/src/components/ScrollHint.tsx b/packages/demo/src/components/ScrollHint.tsx
index 9619727..9baf3d2 100644
--- a/packages/demo/src/components/ScrollHint.tsx
+++ b/packages/demo/src/components/ScrollHint.tsx
@@ -6,8 +6,6 @@ export function ScrollHint() {
return (
(
+ ref: RefObject,
+ percentage: number,
+ callback: (isIntersecting: boolean) => void
+) {
+ React.useEffect(() => {
+ if (!ref.current) return
+
+ const intersectionObserver = new IntersectionObserver(
+ (entries) => {
+ const entry = entries[0]
+ callback(entry.isIntersecting)
+ },
+ { threshold: percentage }
+ )
+
+ intersectionObserver.observe(ref.current)
+
+ return () => intersectionObserver.disconnect()
+ }, [ref, callback, percentage])
+}