npm-pkg-hook 1.11.2 → 1.11.3

package/package.json

@@ -10,7 +10,6 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-query": "^3.39.2",
-    "react-responsive": "^10.0.0",
     "xlsx": "0.18.5"
   },
   "description": "description-pkg-hook",
@@ -46,5 +45,5 @@
     "rm": "rm -rf node_modules package-lock.json && npm i",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.11.2"
+  "version": "1.11.3"
 }

package/src/hooks/useMobile/index.js

@@ -1,16 +1,35 @@
-import { useMediaQuery } from 'react-responsive'
+import { useEffect, useState } from 'react'
 
 export const MEDIA_QUERY = {
-  MOBILE: '768px',
-  TABLED: '960px'
+  MOBILE: '(max-width: 768px)',
+  TABLET: '(max-width: 960px)'
 }
 
 export const useMobile = () => {
-  const isMobile = useMediaQuery({ query: `(max-width: ${MEDIA_QUERY.MOBILE})` })
-  const isTablet = useMediaQuery({ query: `(max-width: ${MEDIA_QUERY.TABLED}})` })
+  const [isMobile, setIsMobile] = useState(false)
+  const [isTablet, setIsTablet] = useState(false)
 
-  return {
-    isMobile,
-    isTablet
-  }
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mobileQuery = window.matchMedia(MEDIA_QUERY.MOBILE)
+    const tabletQuery = window.matchMedia(MEDIA_QUERY.TABLET)
+
+    const updateMatches = () => {
+      setIsMobile(mobileQuery.matches)
+      setIsTablet(tabletQuery.matches)
+    }
+
+    updateMatches() // inicializa
+
+    mobileQuery.addEventListener('change', updateMatches)
+    tabletQuery.addEventListener('change', updateMatches)
+
+    return () => {
+      mobileQuery.removeEventListener('change', updateMatches)
+      tabletQuery.removeEventListener('change', updateMatches)
+    }
+  }, [])
+
+  return { isMobile, isTablet }
 }