React hook for evaluating media queries and reduced‑motion preference.
// Source: https://github.com/NousResearch/hermes-agent | 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
}
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key