diff --git a/src/index.ts b/src/index.ts index 62faff0..7bb2a7f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,6 +39,7 @@ type State = { scrollContainers: HTMLOrSVGElement[] | null resizeObserver: ResizeObserver | null lastBounds: RectReadOnly + orientationHandler: null | (() => void) } export type Options = { @@ -72,7 +73,13 @@ function useMeasure( }) // keep all state in a ref - const state = useRef({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: bounds }) + const state = useRef({ + element: null, + scrollContainers: null, + resizeObserver: null, + lastBounds: bounds, + orientationHandler: null, + }) // set actual debounce values early, so effects know if they should react accordingly const scrollDebounce = debounce ? (typeof debounce === 'number' ? debounce : debounce.scroll) : null @@ -129,6 +136,14 @@ function useMeasure( state.current.resizeObserver.disconnect() state.current.resizeObserver = null } + + if (state.current.orientationHandler) { + if ('orientation' in screen && 'removeEventListener' in screen.orientation) { + screen.orientation.removeEventListener('change', state.current.orientationHandler) + } else if ('onorientationchange' in window) { + window.removeEventListener('orientationchange', state.current.orientationHandler) + } + } } // add scroll-listeners / observers @@ -141,6 +156,19 @@ function useMeasure( scrollContainer.addEventListener('scroll', scrollChange, { capture: true, passive: true }), ) } + + // Handle orientation changes + state.current.orientationHandler = () => { + scrollChange() + } + + // Use screen.orientation if available + if ('orientation' in screen && 'addEventListener' in screen.orientation) { + screen.orientation.addEventListener('change', state.current.orientationHandler) + } else if ('onorientationchange' in window) { + // Fallback to orientationchange event + window.addEventListener('orientationchange', state.current.orientationHandler) + } } // the ref we expose to the user