use-mobile

jolyui-ui/use-mobile

FreeHook

jolyui/ui publishes no description for this item.

Live preview

live · rendered by the registry

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

Install it

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

Source

hooks/use-mobile.tsjolyui.dev/r/use-mobile.json

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

Files it writes

hooks/use-mobile.ts