{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-media-query-hook",
  "description": "A React hook for responsive design that listens to CSS media queries and returns boolean values, enabling components to conditionally render content based on screen size, device orientation, or other media features.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "https://mksingh.dev/r/use-isomorphic-layout-effect.json"
  ],
  "files": [
    {
      "path": "registry/hooks/use-media-query.ts",
      "content": "import { useState } from 'react'\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect'\n\ntype UseMediaQueryOptions = {\n    defaultValue?: boolean\n    initializeWithValue?: boolean\n}\n\nconst IS_SERVER = typeof window === 'undefined'\n\nexport function useMediaQuery(\n    query: string,\n    {\n        defaultValue = false,\n        initializeWithValue = true,\n    }: UseMediaQueryOptions = {},\n): boolean {\n    const getMatches = (query: string): boolean => {\n        if (IS_SERVER) {\n            return defaultValue\n        }\n        return window.matchMedia(query).matches\n    }\n\n    const [matches, setMatches] = useState<boolean>(() => {\n        if (initializeWithValue) {\n            return getMatches(query)\n        }\n        return defaultValue\n    })\n\n    // Handles the change event of the media query.\n    function handleChange() {\n        setMatches(getMatches(query))\n    }\n\n    useIsomorphicLayoutEffect(() => {\n        const matchMedia = window.matchMedia(query)\n\n        // Triggered at the first client-side load and if query changes\n        handleChange()\n\n        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)\n        if (matchMedia.addListener) {\n            matchMedia.addListener(handleChange)\n        } else {\n            matchMedia.addEventListener('change', handleChange)\n        }\n\n        return () => {\n            if (matchMedia.removeListener) {\n                matchMedia.removeListener(handleChange)\n            } else {\n                matchMedia.removeEventListener('change', handleChange)\n            }\n        }\n    }, [query])\n\n    return matches\n}",
      "type": "registry:hook",
      "target": "hooks/use-media-query.ts"
    }
  ],
  "type": "registry:hook"
}