Demo

useMediaQuery

Subscribe to a max-width breakpoint. Returns true when the viewport is narrower than the breakpoint. Import from @quan-erp/shared-ui.

Signature

useMediaQuery(breakpoint) tracks window width. Default breakpoint is 768 (Tailwind md).

  • breakpoint — pixel width; below this width the hook returns true
  • Common values: 640 (sm), 768 (md), 1024 (lg)
TSsignature
function useMediaQuery(breakpoint?: number): boolean; // default breakpoint = 768

Usage

Branch layout or behavior for mobile vs desktop without duplicating CSS-only solutions when you need JS control.

TSXlayout
1import { useMediaQuery } from "@quan-erp/shared-ui"; 2 3export function ProductToolbar() { 4 const isMobile = useMediaQuery(768); 5 6 if (isMobile) { 7 return <MobileActionsSheet />; 8 } 9 10 return <DesktopActionBar />; 11}

Notes

  • Prefer CSS responsive classes when you only need layout
  • Use this hook when behavior differs (different components, dialog vs sheet)
  • Works with useMobileBackDialog and Responsive Dialog patterns