@uxf/core-react 11.100.0 → 11.104.0

package/README.md

@@ -105,6 +105,9 @@ useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
 ```
 ---
 ### useMinWindowWidth
+
+> **Deprecated** — Use `useMediaQuery` instead.
+
 Returns boolean if window width is equal or greater than given value.
 ```tsx
 import { useMinWindowWidth } from "@uxf/core-react/hooks/use-min-window-width";
@@ -387,14 +390,35 @@ import { nl2br } from "@uxf/core-react/string/nl2br";
 ```
 ---
 ### useMediaQuery
-Returns if the media query is matched.
+Returns whether the given media query is currently matched. Optionally accepts a callback that is called on every change.
+
+Uses `window.matchMedia` with a `change` event listener (via `AbortController`) for efficient updates.
+
 ```tsx
 import { useMediaQuery } from "@uxf/core-react/hooks/use-media-query";
+import type { UseMediaQueryCallback } from "@uxf/core-react/hooks/use-media-query";
 import { twScreens } from "@generated/tw-tokens/tw-screens";
 
+// Basic usage – reactive boolean (SSR-safe, initializes as false)
 const isDesktop = useMediaQuery(`(min-width: ${twScreens.sm})`);
+
+// With optional callback – fired on every match change
+const callback: UseMediaQueryCallback = (isMatching, mediaQueryString) => {
+    console.log(isMatching, mediaQueryString);
+};
+
+const isDesktopWithCallback = useMediaQuery(`(min-width: ${twScreens.sm})`, callback);
+
+// Client-only usage – initializes immediately from window.matchMedia (no SSR hydration)
+// Pass isSSR=false only when the component is guaranteed to render client-side only
+const isDesktopClientOnly = useMediaQuery(`(min-width: ${twScreens.sm})`, undefined, false);
 ```
 
+**Parameters:**
+- `mediaQueryString` – CSS media query string
+- `callback` *(optional)* – called with `(isMatching, mediaQueryString)` on every match change
+- `isSSR` *(optional, default: `true`)* – when `true`, initial state is `false` to avoid SSR/hydration mismatch; when `false`, initial state is read directly from `window.matchMedia` (use only in client-only components)
+
 ## Drag and Drop (DND) Hooks
 
 Provides a set of hooks built on top of [@dnd-kit](https://dndkit.com/) for implementing drag-and-drop functionality with different patterns.

package/hooks/use-media-query.d.ts

@@ -1 +1,2 @@
-export declare function useMediaQuery(mediaQueryString: string): boolean;
+export type UseMediaQueryCallback = (isMatching: boolean, mediaQueryString: string) => void;
+export declare function useMediaQuery(mediaQueryString: string, callback?: UseMediaQueryCallback, isSSR?: boolean): boolean;

package/hooks/use-media-query.js

@@ -2,17 +2,26 @@
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaQuery = useMediaQuery;
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
 const react_1 = require("react");
-function useMediaQuery(mediaQueryString) {
-    const [isMatched, setIsMatched] = (0, react_1.useState)(false);
+function useMediaQuery(mediaQueryString, callback, isSSR = true) {
+    const [isMatching, setIsMatching] = (0, react_1.useState)(isSSR ? false : window.matchMedia(mediaQueryString).matches);
+    const latestCallback = (0, use_latest_1.useLatest)(callback);
     (0, react_1.useEffect)(() => {
-        const observer = new ResizeObserver(() => {
-            setIsMatched(window.matchMedia(mediaQueryString).matches);
+        const controller = new AbortController();
+        const mqList = window.matchMedia(mediaQueryString);
+        function handler(matches, media) {
+            var _a;
+            setIsMatching(matches);
+            (_a = latestCallback.current) === null || _a === void 0 ? void 0 : _a.call(latestCallback, matches, media);
+        }
+        handler(mqList.matches, mqList.media);
+        mqList.addEventListener("change", (e) => handler(e.matches, e.media), {
+            signal: controller.signal,
         });
-        observer.observe(document.body);
         return () => {
-            observer.unobserve(document.body);
+            controller.abort();
         };
-    }, [mediaQueryString]);
-    return isMatched;
+    }, [latestCallback, mediaQueryString]);
+    return isMatching;
 }

package/hooks/use-min-window-width.d.ts

@@ -1 +1,4 @@
+/**
+ * @deprecated Use useMediaQuery instead
+ */
 export declare function useMinWindowWidth(minWidth: number, debounce?: number): boolean | undefined;

package/hooks/use-min-window-width.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMinWindowWidth = useMinWindowWidth;
 const react_1 = require("react");
 const use_raf_state_1 = require("./use-raf-state");
+/**
+ * @deprecated Use useMediaQuery instead
+ */
 function useMinWindowWidth(minWidth, debounce = 0) {
     const [state, setState] = (0, use_raf_state_1.useRafState)();
     (0, react_1.useEffect)(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.100.0",
+    "version": "11.104.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",