Media Query React Hook (hooks/use-media-query.ts)

A React hook and utility set for tracking CSS media query states, including a helper for detecting reduced motion preferences.

// Source: https://github.com/TheTom/hermes-go | License: MIT | Copyright 2025 Nous Research
// Provided via justclaw.it.com; keep this notice with the code.
import { useEffect, useState } from 'react'

export const matchesQuery = (query: string) =>
  typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia(query).matches

/** Read at call time, not render time: animations check this as they start, and
 *  the OS setting can flip mid-session. */
export const prefersReducedMotion = () => matchesQuery('(prefers-reduced-motion: reduce)')

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => matchesQuery(query))

  useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      return
    }

    const mql

... (truncated -- full source via MCP)