Spaces:

BrainForge
/

AdvisoryBuilderWorkshop

Sleeping

AdvisoryBuilderWorkshop / frontend /src /hooks /useMediaQuery.ts

Deploy tutorial feature and recent fixes

d8808e7 verified 4 months ago

601 Bytes

import { useEffect, useState } from 'react'

/** Subscribes to `window.matchMedia(query)`; updates on resize / breakpoint changes. */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() =>
    typeof window !== 'undefined' ? window.matchMedia(query).matches : false,
  )

  useEffect(() => {
    const mq = window.matchMedia(query)
    const onChange = () => setMatches(mq.matches)
    onChange()
    mq.addEventListener('change', onChange)
    return () => mq.removeEventListener('change', onChange)
  }, [query])

  return matches
}

	import { useEffect, useState } from 'react'

	/** Subscribes to `window.matchMedia(query)`; updates on resize / breakpoint changes. */
	export function useMediaQuery(query: string): boolean {
	const [matches, setMatches] = useState(() =>
	typeof window !== 'undefined' ? window.matchMedia(query).matches : false,
	)

	useEffect(() => {
	const mq = window.matchMedia(query)
	const onChange = () => setMatches(mq.matches)
	onChange()
	mq.addEventListener('change', onChange)
	return () => mq.removeEventListener('change', onChange)
	}, [query])

	return matches
	}