Proyectos de Subversion LeadersLinked - SPA

import { useLayoutEffect, useState } from 'react'

export function useMediaQuery(
  query,
  options = { defaultValue: false, initializeWithValue: true }
) {
  const getMatches = (query) => {
    return window.matchMedia(query).matches
  }

  const [matches, setMatches] = useState(() => {
    if (options.initializeWithValue) {
      return getMatches(query)
    }
    return options.defaultValue
  })

  // Handles the change event of the media query.
  function handleChange() {
    setMatches(getMatches(query))
  }

  useLayoutEffect(() => {
    const matchMedia = window.matchMedia(query)
    handleChange()

    matchMedia.addEventListener('change', handleChange)
    return () => {
      matchMedia.removeEventListener('change', handleChange)
    }
  }, [query])

  return matches
}