nextemos 3.6.3 → 3.6.5

package/dist/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { default as useFetch } from './useFetch';
 export { default as useLocalStorage } from './useLocalStorage';
-export { default as useWindowSize } from './useWindowSize';
+export { default as useMediaQuery } from './useMediaQuery';

package/dist/hooks/index.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWindowSize = exports.useLocalStorage = exports.useFetch = void 0;
+exports.useMediaQuery = exports.useLocalStorage = exports.useFetch = void 0;
 /// hooks
 var useFetch_1 = require("./useFetch");
 Object.defineProperty(exports, "useFetch", { enumerable: true, get: function () { return __importDefault(useFetch_1).default; } });
 var useLocalStorage_1 = require("./useLocalStorage");
 Object.defineProperty(exports, "useLocalStorage", { enumerable: true, get: function () { return __importDefault(useLocalStorage_1).default; } });
-var useWindowSize_1 = require("./useWindowSize");
-Object.defineProperty(exports, "useWindowSize", { enumerable: true, get: function () { return __importDefault(useWindowSize_1).default; } });
+var useMediaQuery_1 = require("./useMediaQuery");
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return __importDefault(useMediaQuery_1).default; } });

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,37 @@
+interface IWindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * useMediaQuery Hook
+ *
+ * @description
+ * A custom React hook that listens for the window size and checks if it matches a specified media query.
+ *
+ * This hook is particularly useful in responsive design scenarios where you need to render different components
+ * or apply different styles based on the screen size (e.g., mobile vs desktop).
+ *
+ * @param {Object} options - The options for the hook.
+ * @param {string} options.query - The media query string to be matched (e.g., '(max-width: 960px)').
+ * If not provided, it defaults to a common mobile screen width.
+ *
+ * @returns {Object} An object containing:
+ * - `width` (number): The current width of the window.
+ * - `height` (number): The current height of the window.
+ * - `isMobile` (boolean): Whether the screen matches the provided media query (typically for mobile screens).
+ *
+ * @example
+ * const { width, height, isMobile } = useMediaQuery({ query: '(max-width: 768px)' });
+ *
+ * if (isMobile) {
+ *   // Render mobile-specific component or apply mobile-specific styles
+ * } else {
+ *   // Render desktop-specific component or apply desktop-specific styles
+ * }
+ */
+declare const useMediaQuery: ({ query }?: {
+    query?: string;
+}) => IWindowSize & {
+    isMobile: boolean;
+};
+export default useMediaQuery;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * useMediaQuery Hook
+ *
+ * @description
+ * A custom React hook that listens for the window size and checks if it matches a specified media query.
+ *
+ * This hook is particularly useful in responsive design scenarios where you need to render different components
+ * or apply different styles based on the screen size (e.g., mobile vs desktop).
+ *
+ * @param {Object} options - The options for the hook.
+ * @param {string} options.query - The media query string to be matched (e.g., '(max-width: 960px)').
+ * If not provided, it defaults to a common mobile screen width.
+ *
+ * @returns {Object} An object containing:
+ * - `width` (number): The current width of the window.
+ * - `height` (number): The current height of the window.
+ * - `isMobile` (boolean): Whether the screen matches the provided media query (typically for mobile screens).
+ *
+ * @example
+ * const { width, height, isMobile } = useMediaQuery({ query: '(max-width: 768px)' });
+ *
+ * if (isMobile) {
+ *   // Render mobile-specific component or apply mobile-specific styles
+ * } else {
+ *   // Render desktop-specific component or apply desktop-specific styles
+ * }
+ */
+const useMediaQuery = ({ query = process.env.NEXT_PUBLIC_MAX_MATCHES || '(max-width: 960px)' } = {}) => {
+    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    /**
+     * handleResize
+     *
+     * @description
+     * Updates the window size state when the window is resized.
+     */
+    const handleResize = () => {
+        const { innerWidth, innerHeight } = window;
+        setWindowSize({ width: innerWidth, height: innerHeight });
+    };
+    /**
+     * handleChange
+     *
+     * @description
+     * Updates the isMobile state when the media query status changes.
+     */
+    const handleChange = (event) => {
+        setIsMobile(event.matches);
+    };
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            // Initialize window size and media query match
+            handleResize();
+            const mediaQuery = window.matchMedia(query);
+            setIsMobile(mediaQuery.matches);
+            // Add event listeners
+            mediaQuery.addEventListener('change', handleChange);
+            window.addEventListener('resize', handleResize);
+            // Cleanup event listeners on component unmount
+            return () => {
+                mediaQuery.removeEventListener('change', handleChange);
+                window.removeEventListener('resize', handleResize);
+            };
+        }
+    }, [query]);
+    return Object.assign(Object.assign({}, windowSize), { isMobile });
+};
+exports.default = useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextemos",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "description": "For helpers and hooks used in NextJS projects",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/hooks/useWindowSize.d.ts

@@ -1,14 +0,0 @@
-interface IWindowSize {
-    width: number;
-    height: number;
-}
-/**
- * useWindowSize Hook
- *
- * @description
- * A custom React hook that listens for the window size and returns it.
- *
- * @returns {Object} An object containing the width and height of the window window.
- */
-declare const useWindowSize: () => IWindowSize;
-export default useWindowSize;

package/dist/hooks/useWindowSize.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * useWindowSize Hook
- *
- * @description
- * A custom React hook that listens for the window size and returns it.
- *
- * @returns {Object} An object containing the width and height of the window window.
- */
-const useWindowSize = () => {
-    const [windowSize, setWindowSize] = (0, react_1.useState)({
-        width: 0,
-        height: 0,
-    });
-    /**
-     * handleResize
-     *
-     * @description
-     * A function to update the window size state when the window is resized.
-     */
-    const handleResize = () => {
-        setWindowSize({
-            width: window.innerWidth,
-            height: window.innerHeight,
-        });
-    };
-    /**
-     * useEffect Hook
-     *
-     * @description
-     * A React hook that is used for side-effects in functional components.
-     *
-     * @params {Function} () => {} A callback function that contains the side-effect logic.
-     * @params {Array} [] An array of dependencies. When empty, it means the useEffect runs once after the initial render.
-     */
-    (0, react_1.useEffect)(() => {
-        if (typeof window !== 'undefined') {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, []);
-    return windowSize;
-};
-exports.default = useWindowSize;