use-mobile

agentmesh/use-mobile

FreeHook

shadcn/ui publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by shadcn/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/ombhanushaliii/agentmesh/main/example/ui/apps/v4/public/r/styles/base-vega/use-mobile.json

Source

registry/base-vega/hooks/use-mobile.tsraw.githubusercontent.com/ombhanushaliii/agentmesh/main/example/ui/apps/v4/public/r/styles/base-vega/use-mobile.json

1import * as React from "react"
2 
3const MOBILE_BREAKPOINT = 768
4 
5export function useIsMobile() {
6  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
7 
8  React.useEffect(() => {
9    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10    const onChange = () => {
11      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12    }
13    mql.addEventListener("change", onChange)
14    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15    return () => mql.removeEventListener("change", onChange)
16  }, [])
17 
18  return !!isMobile
19}

Files it writes

registry/base-vega/hooks/use-mobile.ts