{"_id":"@btja/use-tailwind-media-query","_rev":"5-b1ba4a5691570b8983b07d4a66da2efe","name":"@btja/use-tailwind-media-query","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@btja/use-tailwind-media-query","version":"0.1.0","author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","_id":"@btja/use-tailwind-media-query@0.1.0","maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"dist":{"shasum":"afd2d5f8aa6f7617cdc2bf64955a2606e3a78d9a","tarball":"https://registry.npmjs.org/@btja/use-tailwind-media-query/-/use-tailwind-media-query-0.1.0.tgz","fileCount":7,"integrity":"sha512-P6vPgSv1pdclksSO5mudZYNTQu7ROCqlJu/u+LdwSo4JeVvLqb/eLnByZ2AW0h7E+mNPAC74E3Tu6/17jOqAkQ==","signatures":[{"sig":"MEUCIQCVIDql1VdeIp3ymxs6voQMuisRYAvdNVGBATUaoTBsCQIgWeqbT3gvaPzUmbLEiHqJXfm2utR2KB1ouVtqAdeR8bI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11589},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.js","engines":{"node":">=14.18.0"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"431c4ca0f9bc43e5d0922732273d474f98f42833","scripts":{"dev":"tsdown --watch","play":"vite","test":"vitest","build":"tsdown","typecheck":"tsc --noEmit","bump:version":"bumpp","pack:dry-run":"npm pack --dry-run","check:release":"pnpm run build && pnpm run test -- --run && pnpm run typecheck && pnpm run pack:dry-run","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"btja","email":"brian.w.tjahjadi@gmail.com"},"repository":{"url":"git+https://github.com/bwt2/use-tailwind-media-query.git","type":"git"},"_npmVersion":"10.9.3","description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.11","bumpp":"^11.1.0","tsdown":"^0.22.0","vitest":"^4.1.5","publint":"^0.3.21","typescript":"^6.0.3","@types/node":"^25.6.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@tsconfig/strictest":"^2.0.8","@vitejs/plugin-react":"^6.0.1","vitest-browser-react":"^2.2.0","@arethetypeswrong/core":"^0.18.4","@rolldown/plugin-babel":"^0.2.3","@vitest/browser-playwright":"^4.1.5","babel-plugin-react-compiler":"^1.0.0"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/use-tailwind-media-query_0.1.0_1783329135547_0.5487908166648332","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@btja/use-tailwind-media-query","version":"0.1.1","keywords":["tailwind","media-query","react","hooks","react-hooks","hook","custom-hook","use-tailwind-media-query"],"author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","_id":"@btja/use-tailwind-media-query@0.1.1","maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"dist":{"shasum":"e085e1f417ff23a79dfccc1a31f5bafee164c326","tarball":"https://registry.npmjs.org/@btja/use-tailwind-media-query/-/use-tailwind-media-query-0.1.1.tgz","fileCount":7,"integrity":"sha512-MpCoL+2LD0zDdmf7Fe+dYrrIh0TIBplqGL9W3+ckKWi1VQIoZATuK6KE1v3aiN80ZFUFYgQPab8mARYM0vMo2A==","signatures":[{"sig":"MEUCIFkaRjUU4OCGUD1LnVtMZuz30C8moiY32OiubTacJEpQAiEA3jq8gEWVa5hfqtDjNi0jK9UgC0Qoh5vGex4gOp4cCJE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12032},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.js","engines":{"node":">=14.18.0"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"5d1c97b50153e4ec1909f3ff080a09adaf368553","scripts":{"dev":"tsdown --watch","play":"vite","test":"vitest","build":"tsdown","typecheck":"tsc --noEmit","bump:version":"bumpp","pack:dry-run":"npm pack --dry-run","check:release":"pnpm run build && pnpm run test -- --run && pnpm run typecheck && pnpm run pack:dry-run","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"btja","email":"brian.w.tjahjadi@gmail.com"},"repository":{"url":"git+https://github.com/bwt2/use-tailwind-media-query.git","type":"git"},"_npmVersion":"10.9.3","description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.11","bumpp":"^11.1.0","tsdown":"^0.22.0","vitest":"^4.1.5","publint":"^0.3.21","typescript":"^6.0.3","@types/node":"^25.6.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@tsconfig/strictest":"^2.0.8","@vitejs/plugin-react":"^6.0.1","vitest-browser-react":"^2.2.0","@arethetypeswrong/core":"^0.18.4","@rolldown/plugin-babel":"^0.2.3","@vitest/browser-playwright":"^4.1.5","babel-plugin-react-compiler":"^1.0.0"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/use-tailwind-media-query_0.1.1_1783330279704_0.048618989725915496","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@btja/use-tailwind-media-query","version":"0.1.4","keywords":["tailwind","media-query","react","hooks","react-hooks","hook","custom-hook","use-tailwind-media-query"],"author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","_id":"@btja/use-tailwind-media-query@0.1.4","maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"dist":{"shasum":"a708ce6c4fd76448403561a3c635673963f9face","tarball":"https://registry.npmjs.org/@btja/use-tailwind-media-query/-/use-tailwind-media-query-0.1.4.tgz","fileCount":7,"integrity":"sha512-Jqb4JGAzAOnze+1A2KmiE4O/Zxk+gYR0UK4PqUuov8p8xGR/PBsYh/BRxX0EwyxsM+v8sT74+3d5msRtOvqLwA==","signatures":[{"sig":"MEQCIGx1cLW7F5qb+N7jp6glLAuYJDd2ccdyDXweBvfaqOG8AiAZfwqtGv6ooKDk5lfORztcPhx1RCWIBS2N2kYgDke72w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12033},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.js","engines":{"node":">=14.18.0"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"1e5b5708f9664d39b0c810dce74c7110c22fdbc3","scripts":{"dev":"tsdown --watch","play":"vite","test":"vitest","build":"tsdown","typecheck":"tsc --noEmit","bump:version":"bumpp","pack:dry-run":"npm pack --dry-run","check:release":"pnpm run build && pnpm run test -- --run && pnpm run typecheck && pnpm run pack:dry-run","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"btja","email":"brian.w.tjahjadi@gmail.com"},"repository":{"url":"git+https://github.com/bwt2/use-tailwind-media-query.git","type":"git"},"_npmVersion":"10.9.3","description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.11","bumpp":"^11.1.0","tsdown":"^0.22.0","vitest":"^4.1.5","publint":"^0.3.21","typescript":"^6.0.3","@types/node":"^25.6.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@tsconfig/strictest":"^2.0.8","@vitejs/plugin-react":"^6.0.1","vitest-browser-react":"^2.2.0","@arethetypeswrong/core":"^0.18.4","@rolldown/plugin-babel":"^0.2.3","@vitest/browser-playwright":"^4.1.5","babel-plugin-react-compiler":"^1.0.0"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/use-tailwind-media-query_0.1.4_1783330399918_0.612977901279312","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@btja/use-tailwind-media-query","version":"0.2.0","keywords":["tailwind","media-query","react","hooks","react-hooks","hook","custom-hook","use-tailwind-media-query","tailwind-media-query","tailwind-breakpoints","adaptive-design"],"author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","_id":"@btja/use-tailwind-media-query@0.2.0","maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"dist":{"shasum":"9b623a667897e9479d594946b8895f503aea2500","tarball":"https://registry.npmjs.org/@btja/use-tailwind-media-query/-/use-tailwind-media-query-0.2.0.tgz","fileCount":7,"integrity":"sha512-Tltw2E9XaaTLXnTCaKy3TXoBDIqMH/k4JDs/+dJyIMlp+Z3LBNuwxoGwGYE/XzBNg757NSM0QSH+70od9hshFw==","signatures":[{"sig":"MEYCIQDhLyu/uvxI6eRFwIiOEHaYk34jayndyoP8Zq6LAVpFnwIhAND6W3ADyx6KVnynXz9D6zMz2NnezvJo2XbNoty7f4AK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15796},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.js","engines":{"node":">=14.18.0"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"ffbbf5bb13932e64b341adfadc5bf54c70f794f3","scripts":{"dev":"tsdown --watch","play":"vite","test":"vitest","build":"tsdown","typecheck":"tsc --noEmit","play:build":"vite build","bump:version":"bumpp","pack:dry-run":"npm pack --dry-run","check:release":"pnpm run build && pnpm run test -- --run && pnpm run typecheck && pnpm run pack:dry-run","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"btja","email":"brian.w.tjahjadi@gmail.com"},"repository":{"url":"git+https://github.com/bwt2/use-tailwind-media-query.git","type":"git"},"_npmVersion":"10.9.3","description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.11","bumpp":"^11.1.0","tsdown":"^0.22.0","vitest":"^4.1.5","publint":"^0.3.21","typescript":"^6.0.3","@types/node":"^25.6.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@tsconfig/strictest":"^2.0.8","@vitejs/plugin-react":"^6.0.1","vitest-browser-react":"^2.2.0","@arethetypeswrong/core":"^0.18.4","@rolldown/plugin-babel":"^0.2.3","@vitest/browser-playwright":"^4.1.5","babel-plugin-react-compiler":"^1.0.0"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/use-tailwind-media-query_0.2.0_1783353096779_0.918562038405766","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@btja/use-tailwind-media-query","type":"module","version":"0.2.1","description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","keywords":["tailwind","media-query","react","hooks","react-hooks","hook","custom-hook","use-tailwind-media-query","tailwind-media-query","tailwind-breakpoints","adaptive-design"],"homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","repository":{"type":"git","url":"git+https://github.com/bwt2/use-tailwind-media-query.git"},"bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"publishConfig":{"access":"public"},"sideEffects":false,"engines":{"node":">=14.18.0"},"scripts":{"build":"tsdown","dev":"tsdown --watch","play":"vite","play:build":"vite build","test":"vitest","typecheck":"tsc --noEmit","pack:dry-run":"npm pack --dry-run","check:release":"pnpm run build && pnpm run test -- --run && pnpm run typecheck && pnpm run pack:dry-run","bump:version":"bumpp","prepublishOnly":"pnpm run build"},"peerDependencies":{"react":"^19.2.0","react-dom":"^19.2.0"},"devDependencies":{"@arethetypeswrong/core":"^0.18.4","@rolldown/plugin-babel":"^0.2.3","@tsconfig/strictest":"^2.0.8","@types/node":"^25.6.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","@vitest/browser-playwright":"^4.1.5","babel-plugin-react-compiler":"^1.0.0","bumpp":"^11.1.0","publint":"^0.3.21","tsdown":"^0.22.0","typescript":"^6.0.3","vite":"^8.0.11","vitest":"^4.1.5","vitest-browser-react":"^2.2.0"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.cts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"4ed2c93c867ed4838f17be012dbcc460e6c9ce17","_id":"@btja/use-tailwind-media-query@0.2.1","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-9A5SNjec0C4a9Zd0AkeLf5vus9Sptofz82HmPn/uzjKsy2BClQoZHuuT0kw/2AYMFTlO6uegONL10P8hEPy/Ag==","shasum":"2f2974d17cee09b73743b88fd8b6fbeb56a22554","tarball":"https://registry.npmjs.org/@btja/use-tailwind-media-query/-/use-tailwind-media-query-0.2.1.tgz","fileCount":7,"unpackedSize":19992,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAkeyoG2DyKXl6rV/h42OAyJmHjmIh1O2kjoSajgvgoKAiBSBkKM/Tc4n1a0jl1sT7e022L4u/RrNG6oaUMd+i/zuQ=="}]},"_npmUser":{"name":"btja","email":"brian.w.tjahjadi@gmail.com"},"directories":{},"maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-tailwind-media-query_0.2.1_1784029320345_0.374900601978402"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-06T09:12:15.349Z","modified":"2026-07-14T11:42:00.607Z","0.1.0":"2026-07-06T09:12:15.693Z","0.1.1":"2026-07-06T09:31:19.848Z","0.1.4":"2026-07-06T09:33:20.052Z","0.2.0":"2026-07-06T15:51:36.953Z","0.2.1":"2026-07-14T11:42:00.502Z"},"bugs":{"url":"https://github.com/bwt2/use-tailwind-media-query/issues"},"author":{"name":"Brian W Tjahjadi","email":"brian.w.tjahjadi@gmail.com"},"license":"MIT","homepage":"https://github.com/bwt2/use-tailwind-media-query#readme","keywords":["tailwind","media-query","react","hooks","react-hooks","hook","custom-hook","use-tailwind-media-query","tailwind-media-query","tailwind-breakpoints","adaptive-design"],"repository":{"type":"git","url":"git+https://github.com/bwt2/use-tailwind-media-query.git"},"description":"Helper react hook to listen for tailwind media breakpoints. Intended for use with adaptive design.","maintainers":[{"name":"btja","email":"brian.w.tjahjadi@gmail.com"}],"readme":"# use-tailwind-media-query\n\nReact 19 hooks for Tailwind-style breakpoints and arbitrary media queries.\n\n\n \n \n \n \n
\n \"Desktop\n
Desktop view
\n 		\n \"Mobile\n
Mobile view
\n
\n\n
\n Live demo\n
\n\n## Installation\n\n```bash\nnpm i @btja/use-tailwind-media-query\nyarn add @btja/use-tailwind-media-query\npnpm add @btja/use-tailwind-media-query\nbun add @btja/use-tailwind-media-query\n```\n\n## API\n\n```tsx\nimport {\n useTailwindBreakpoint,\n useIsDesktop,\n useIsLargeDesktop,\n useIsMobile,\n useIsTablet,\n useMediaQuery,\n} from '@btja/use-tailwind-media-query'\nimport type { TailwindBreakpoint } from '@btja/use-tailwind-media-query'\n```\n\nBuilt-in tailwind breakpoints (`TailwindBreakpoint`):\n\n| Breakpoint | Min width |\n| --- | --- |\n| `sm` | `640px` |\n| `md` | `768px` |\n| `lg` | `1024px` |\n| `xl` | `1280px` |\n| `2xl` | `1536px` |\n\nHooks:\n\n| Hook | Returns | Purpose |\n| --- | --- | --- |\n| `useMediaQuery(query: string, options?)` | `bool` | Subscribe to any CSS media query |\n| `useTailwindBreakpoint(tailwindBreakpoint: TailwindBreakpoint, options?)` | `bool` | Tailwind breakpoint helper |\n| `useIsMobile()` | `bool` | `true` below `md` |\n| `useIsTablet()` | `bool` | `true` from `md` to below `lg` |\n| `useIsDesktop()` | `bool` | `true` at `lg` and above |\n| `useIsLargeDesktop()` | `bool` | `true` at `xl` and above |\n\n## Examples\n\n`useIsMobile` (`useIsTablet`, `useIsDesktop`, `useIsLargeDesktop`):\n\n```tsx\nimport { useIsMobile } from '@btja/use-tailwind-media-query'\n\nexport function Example() {\n const isMobile = useIsMobile()\n\n return isMobile ? : \n}\n```\n\n`useTailwindBreakpoint`:\n\n```tsx\nimport { useTailwindBreakpoint } from '@btja/use-tailwind-media-query'\n\nexport function SidebarLayout() {\n const showSidebar = useTailwindBreakpoint('lg')\n\n return showSidebar ? : \n}\n```\n\n```tsx\nimport { useTailwindBreakpoint } from '@btja/use-tailwind-media-query'\n\nexport function SsrSidebarLayout() {\n const showSidebar = useTailwindBreakpoint('lg', { noWindowDefault: true })\n\n return showSidebar ? : \n}\n```\n\n`useMediaQuery`:\n\n```tsx\nimport { useMediaQuery } from '@btja/use-tailwind-media-query'\n\nexport function MotionPreference() {\n const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')\n\n return

{prefersReducedMotion ? 'Reduced motion' : 'Full motion'}

\n}\n```\n\n```tsx\nimport { useMediaQuery } from '@btja/use-tailwind-media-query'\n\nexport function SsrDesktopShell() {\n const isDesktop = useMediaQuery('(min-width: 1024px)', { noWindowDefault: true })\n\n return isDesktop ? : \n}\n```\n\n\n## SEO and SSR\n\nIf possible, keep both screen variants semantically equivalent for SEO, accessibility,\nand consistency purposes.\n\nWith this library, server render does not know the real viewport unless you provide an\nexplicit fallback with `noWindowDefault`:\n\n| Hook | Server-render value |\n| --- | --- |\n| `useMediaQuery()` | `false` |\n| `useMediaQuery(query, { noWindowDefault: true })` | `true` |\n| `useTailwindBreakpoint()` | `false` |\n| `useTailwindBreakpoint(breakpoint, { noWindowDefault: true })` | `true` |\n| `useIsMobile()` | `true` |\n| `useIsDesktop()` | `false` |\n\nSo this:\n\n```tsx\nreturn useIsMobile() ? : \n```\n\nrenders the mobile branch on the server, then hydrates to the real client viewport.\n\nUse `noWindowDefault` when you want the server-rendered branch to default to a known\nassumption before the browser can evaluate `matchMedia`. This is useful when your SSR\nenvironment already has a strong hint about the likely viewport and you want to reduce\nlayout flipping during hydration.\n\nWays to choose `noWindowDefault` on the server include:\n- infer a mobile/desktop default from the user-agent string\n- use device hints or request headers provided by your framework, CDN, or edge runtime\n- store a prior device preference in a cookie and reuse it during SSR\n- pick a product-level default such as mobile-first when no reliable hint exists\n\nIf the server guess is wrong, the client will correct to the real media-query result after hydration (with risk of layout flash).\n\nIf SEO matters, avoid putting unique primary content in only one branch. Keep headings,\ncopy, links, and other canonical content the same when possible, and reserve screen-\nspecific differences for layout or secondary UI.\n\n## Limitations\nCurrent limitation: `useMediaQuery` depends on `MediaQueryList.addEventListener` /\n`removeEventListener`. Older Safari/WebView environments that only implement\n`addListener` / `removeListener` are not supported.\n\n\n## Motivation \n\n### Adaptive design\n\n\nThis hook is intended to be used in adaptive designs in React.\n\nUse adaptive design when layouts should change across breakpoints (for example: dashboards, dense data views, and flows on desktop vs mobile). Prefer plain responsive design when the same hierarchy still works and only spacing,\ncolumns, or typography need to change.\n\n### Store\n\nThe hooks share a small media-query store so repeated breakpoint checks can reuse the\nsame underlying subscription instead of attaching duplicate `matchMedia` listeners in\nevery component. \n\nMultiple components on the same screen can listen to the\nsame media query without duplicating listeners and wasting memory.\n\n## Development\nUsing pnpm.\n\nSetup:\n```bash\nnpx skills add rolldown/tsdown # add tsdown agent skills\npnpm install\n```\n\nUseful commands:\n```bash\npnpm run play # run vite playground\npnpm run test\npnpm run typecheck\npnpm run build\n```\n\nBefore releasing (after `npm login`):\n\n```bash\npnpm check:release\npnpm bump:version\n\nnpm publish --access public\n```\n\n## AI Disclosure\nCodex 5.4 was used to review and sanity-check the code. Codex was also used for:\n- Mockup UI in '`./playground`' demo\n- JSDoc\n- Tests\n","readmeFilename":"README.md"}