fix(match-media): handle full media queries in breakpoints in useResp…

…onsiveValue and useBreakpointIndex hooks
system-ui · Apr 8, 2022 · e574fcf · e574fcf
1 parent 4cc457a
commit e574fcf
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/packages/match-media/src/index.ts b/packages/match-media/src/index.ts
@@ -25,9 +25,13 @@ export const useBreakpointIndex = (options: defaultOptions = {}) => {
   const [value, setValue] = useState(defaultIndex)
   useEffect(() => {
     const getIndex = () =>
-      breakpoints.filter(
-        (bp) => window.matchMedia(`screen and (min-width: ${bp})`).matches
-      ).length
+      breakpoints.filter((bp) => {
+        const query = bp.includes('@media')
+          ? bp.slice(7) // remove '@media '
+          : `screen and (min-width: ${bp})`
+
+        return window.matchMedia(query).matches
+      }).length
 
     const onResize = () => {
       const newValue = getIndex()