Demo

useMediaQuery

Max-width breakpoint ကို စောင့်ကြည့်ပါသည်။ viewport ပိုကျဉ်းပါက true ပြန်ပါသည်။ @quan-erp/shared-ui မှ import လုပ်ရပါသည်။

Signature

useMediaQuery(breakpoint) — default 768 (Tailwind md) ဖြစ်ပါသည်။

  • breakpoint — ဤ width အောက်တွင် true
  • အသုံးများသော တန်ဖိုးများ — 640 / 768 / 1024
TSsignature
function useMediaQuery(breakpoint?: number): boolean; // default breakpoint = 768

အသုံးပြုပုံ

Mobile နှင့် desktop အတွက် component သို့မဟုတ် behavior ကွဲပြားရန် အသုံးပြုရပါသည်။

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}

မှတ်ချက်များ

  • Layout သက်သက်ဆို CSS responsive ကို ဦးစားပေးပါ
  • Behavior ကွဲမှသာ ဤ hook သုံးပါ