fix window access during SSR

iTwin · Mar 26, 2024 · 7c47eb6 · 7c47eb6
1 parent aff5411
commit 7c47eb6
Showing 1 changed file with 6 additions and 7 deletions.
diff --git a/packages/itwinui-react/src/core/utils/hooks/useMediaQuery.ts b/packages/itwinui-react/src/core/utils/hooks/useMediaQuery.ts
@@ -4,27 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useSyncExternalStore } from './useSyncExternalStore.js';
+import { getWindow } from '../functions/dom.js';
 
 export const useMediaQuery = (queryString: string) => {
   const [getSnapshot, subscribe] = React.useMemo(() => {
-    const mediaQueryList = window.matchMedia(queryString);
+    const mediaQueryList = getWindow()?.matchMedia(queryString);
 
     return [
-      () => mediaQueryList.matches,
+      () => mediaQueryList?.matches,
       (onChange: () => void) => {
-        mediaQueryList.addEventListener?.('change', onChange);
+        mediaQueryList?.addEventListener?.('change', onChange);
         return () => {
-          mediaQueryList.removeEventListener?.('change', onChange);
+          mediaQueryList?.removeEventListener?.('change', onChange);
         };
       },
     ];
   }, [queryString]);
 
   return useSyncExternalStore(
     subscribe,
-    isClient ? getSnapshot : () => undefined,
+    typeof document !== 'undefined' ? getSnapshot : () => undefined,
     () => undefined,
   );
 };
-
-const isClient = typeof document !== 'undefined';