react-responsive-tools 2.3.14 → 2.3.16

package/dist/components/horizontal.js

@@ -1,7 +1,7 @@
 /**
  * Created by westp on 15.05.2023
  */
-import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint';
+import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint.js';
 export function For({ children, p }) {
     const is = useBreakpointMF(p);
     if (is)

package/dist/hooks/useBreakpoint.js

@@ -1,10 +1,14 @@
 import { useMediaQuery } from 'react-responsive';
 import useVariant from './useVariant.js';
 import getBreakpoint from "../functions/getBreakpoint.js";
+import { useMemo } from "react";
 export default function useBreakpoint(b, variant = 'MtF') {
-    const _bp = typeof b === 'number' ? b + 'px' : getBreakpoint(b);
-    const v = useVariant(variant);
-    return useMediaQuery({ query: `(${v}-width: ${_bp})` });
+    return useMemo(() => {
+        const _bp = typeof b === 'number' ? b + 'px' : getBreakpoint(b);
+        const v = useVariant(variant);
+        console.log('useMediaQuery', { query: `(${v}-width: ${_bp})` });
+        return useMediaQuery({ query: `(${v}-width: ${_bp})` });
+    }, [variant, b]);
 }
 export function useBreakpointMF(b) {
     return useBreakpoint(b, 'MtF');

package/dist/hooks/useVBreakpoint.js

@@ -1,10 +1,13 @@
 import { useMediaQuery } from 'react-responsive';
 import useVariant from './useVariant.js';
 import { getVBreakpoint } from "../functions/getBreakpoint.js";
+import { useMemo } from "react";
 export default function useVBreakpoint(b, variant = 'MtF') {
-    const _bp = typeof b === 'number' ? b + 'px' : getVBreakpoint(b);
-    const v = useVariant(variant);
-    return useMediaQuery({ query: `(${v}-height: ${_bp})` });
+    return useMemo(() => {
+        const _bp = typeof b === 'number' ? b + 'px' : getVBreakpoint(b);
+        const v = useVariant(variant);
+        return useMediaQuery({ query: `(${v}-height: ${_bp})` });
+    }, [b, variant]);
 }
 export function useVBreakpointMF(b) {
     return useVBreakpoint(b, 'MtF');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.3.14",
+  "version": "2.3.16",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",