⬅️ Back to Table of Contents

📄 useMediaQuery

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	11
🟢 Vue Composition API	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions

🛠️ File Location:

📂 packages/core/useMediaQuery/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
pxValue	@vueuse/shared
computed	vue
shallowRef	vue
toValue	vue
watchEffect	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSSRWidth	../useSSRWidth
useSupported	../useSupported

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useMediaQuery(query: MaybeRefOrGetter<string>, options: ConfigurableWindow & { ssrWidth?: numbe…): any

Reactive Media Query.

Parameters:

• query any: No description
• options any: No description

See: https://vueuse.org/useMediaQuery

Raw JSDoc

/**
 * Reactive Media Query.
 *
 * @see https://vueuse.org/useMediaQuery
 * @param query
 * @param options
 */

Calls:

• useSSRWidth (from ../useSSRWidth)
• useSupported (from ../useSupported)
• shallowRef (from vue)
• watchEffect (from vue)
• toValue(query).split
• queryStrings.some
• queryString.includes
• queryString.match
• Boolean
• pxValue (from @vueuse/shared)
• window!.matchMedia
• toValue (from vue)
• useEventListener (from ../useEventListener)
• computed (from vue)

Internal Comments:

// Exit SSR support on mounted if window available (x4)

Code

export function useMediaQuery(query: MaybeRefOrGetter<string>, options: ConfigurableWindow & { ssrWidth?: number } = {}) {
  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options
  const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window.matchMedia === 'function')

  const ssrSupport = shallowRef(typeof ssrWidth === 'number')

  const mediaQuery = shallowRef<MediaQueryList>()
  const matches = shallowRef(false)

  const handler = (event: MediaQueryListEvent) => {
    matches.value = event.matches
  }

  watchEffect(() => {
    if (ssrSupport.value) {
      // Exit SSR support on mounted if window available
      ssrSupport.value = !isSupported.value

      const queryStrings = toValue(query).split(',')
      matches.value = queryStrings.some((queryString) => {
        const not = queryString.includes('not all')
        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/)
        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/)
        let res = Boolean(minWidth || maxWidth)
        if (minWidth && res) {
          res = ssrWidth! >= pxValue(minWidth[1])
        }
        if (maxWidth && res) {
          res = ssrWidth! <= pxValue(maxWidth[1])
        }
        return not ? !res : res
      })
      return
    }
    if (!isSupported.value)
      return

    mediaQuery.value = window!.matchMedia(toValue(query))
    matches.value = mediaQuery.value.matches
  })

  useEventListener(mediaQuery, 'change', handler, { passive: true })

  return computed(() => matches.value)
}

Internal helpers

Declared inside another function in this file.

handler(event: MediaQueryListEvent): void

Parameters:

• event MediaQueryListEvent

Returns: void

Code

(event: MediaQueryListEvent) => {
    matches.value = event.matches
  }

---

Generated by Syntax Scribe