@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
1 lines • 1.94 kB
Source Map (JSON)
{"version":3,"file":"hooks\\use-mobile.cjs","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * A custom React hook that detects whether the current device is a mobile device\n * based on the screen width.\n *\n * This hook uses a media query to check if the viewport width is less than the defined\n * mobile breakpoint (768px). It updates the state when the window size changes.\n *\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\n * false otherwise.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const isMobile = useIsMobile();\n *\n * return (\n * <div>\n * {isMobile ? 'Mobile View' : 'Desktop View'}\n * </div>\n * );\n * }\n * ```\n */\nexport function useIsMobile(): boolean {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n undefined,\n );\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,+BAAAA,QAAc,CAC5CC;IAGFD,+BAAAA,SAAe,CAAC;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}