{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-media-query",
  "title": "Use Media Query",
  "description": "React hook for responsive media query detection",
  "files": [
    {
      "path": "src/hooks/use-media-query.ts",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype MediaQuery = string | number;\n\nexport function useMediaQuery(query: MediaQuery): boolean {\n  const [matches, setMatches] = useState<boolean>(false);\n\n  useEffect(() => {\n    const mediaQueryList = window.matchMedia(String(query));\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Initial check\n    setMatches(mediaQueryList.matches);\n\n    // Add listener for changes\n    mediaQueryList.addEventListener(\"change\", handleChange);\n\n    // Clean up listener on unmount\n    return () => {\n      mediaQueryList.removeEventListener(\"change\", handleChange);\n    };\n  }, [query]);\n\n  return matches;\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-media-query.ts"
    }
  ],
  "type": "registry:hook"
}