use-mobile

delta-components/use-mobile

FreeHook

delta-components publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by delta-components on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://deltacomponents.dev/r/use-mobile.json

Source

hooks/use-mobile.tsdeltacomponents.dev/r/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/delta-ui/hooks/use-mobile.ts