npm-pkg-hook 1.8.4 → 1.8.5

package/package.json

@@ -6,10 +6,11 @@
     "js-cookie": "3.0.1",
     "lodash": "^4.17.21",
     "md5": "2.3.0",
-    "moment": "^2.29.4", 
+    "moment": "^2.29.4",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-query": "^3.39.2"
+    "react-query": "^3.39.2",
+    "react-responsive": "^10.0.0"
   },
   "description": "description-pkg-hook",
   "devDependencies": {
@@ -30,7 +31,7 @@
   },
   "license": "ISC",
   "main": "/src/index.jsx",
-  "name": "npm-pkg-hook", 
+  "name": "npm-pkg-hook",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -44,5 +45,5 @@
     "rm": "rm -rf node_modules package-lock.json && npm i",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.8.4"
+  "version": "1.8.5"
 }

package/src/hooks/useMobile/index.js

@@ -1,47 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useMediaQuery } from 'react-responsive'
 
-export const useMobile = (props) => {
-  const { callBack = () => {} } = props || {}
-  const [isMobile, setIsMobile] = useState(false)
-  const [isTablet, setIsTablet] = useState(false)
-  const [innerHeight, setInnerHeight] = useState(0)
-  const [innerWidth, setInnerWidth] = useState(0)
-
-  useEffect(() => {
-    const handleResize = () => {
-      // Verificar si window está disponible (es decir, estamos en el lado del cliente)
-      if (typeof window !== 'undefined') {
-        const width = window.innerWidth
-        const height = window.innerHeight
-        setInnerWidth(width)
-        setInnerHeight(height)
-        callBack()
-
-        // Determinar el tipo de dispositivo
-        if (width <= 768) {
-          setIsTablet(true)
-        } else if (width <= 960) {
-          setIsMobile(true)
-        } else {
-          setIsMobile(false)
-        }
-      }
-    }
-
-    // Ejecutar handleResize al cargar y al cambiar el tamaño de la pantalla
-    handleResize()
-    window.addEventListener('resize', handleResize)
+export const MEDIA_QUERY = {
+  MOBILE: '768px',
+  TABLED: '960px'
+}
 
-    // Eliminar el event listener al desmontar el componente
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [callBack])
+export const useMobile = () => {
+  const isMobile = useMediaQuery({ query: `(max-width: ${MEDIA_QUERY.MOBILE})` })
+  const isTablet = useMediaQuery({ query: `(max-width: ${MEDIA_QUERY.TABLED}})` })
 
   return {
     isMobile,
-    isTablet,
-    innerHeight,
-    innerWidth
+    isTablet
   }
 }