useMediaQuery.ts hook

useMediaQuery.ts

import { useMemo, useSyncExternalStore } from 'react'

export function useMediaQuery(query: string): boolean {
	const isClient = typeof window !== 'undefined'
	const media = useMemo(() => (isClient ? window.matchMedia(query) : null), [query])

	return useSyncExternalStore(
		(callback) => {
			if (media) {
				media.addEventListener('change', callback)
				return () => media.removeEventListener('change', callback)
			}
			return () => {}
		},
		() => (media ? media.matches : false),
		() => false
	)
}