{"_id":"@37bytes/configurable-media-context","_rev":"5-ef8152bb7fe7b9a4bf359e84e36ad1da","name":"@37bytes/configurable-media-context","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@37bytes/configurable-media-context","version":"1.0.0","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"author":{"name":"37bytes"},"license":"MIT","_id":"@37bytes/configurable-media-context@1.0.0","maintainers":[{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"}],"homepage":"https://github.com/37bytes/public-packages/configurable-media-context","bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"dist":{"shasum":"d89c236dd1ded47eb0c104b78104873467b8d002","tarball":"https://registry.npmjs.org/@37bytes/configurable-media-context/-/configurable-media-context-1.0.0.tgz","fileCount":8,"integrity":"sha512-P+KWDrgWnJPKb3LSxzMLpoenHwLmD3QCoSwt/xPqNxkSB212zNANUDPrXDycwjyQUEWzK54b/+1eS4OKBlnwnA==","signatures":[{"sig":"MEQCIGa+qkW3ozGK6LvtlOVrS9iEnfoIJTGUIF1yfoAaOJThAiBY6fNKKxTlhSYn6jHlAcFsugvNrCXEbg+8zAJoQ2OS8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17005},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"550bc81d1774277502ab1e2ce064c37d8f1eb41f","scripts":{"build":"tsup","npm-packlist":"npm run build && npx -y npm-packlist@6.0.1"},"_npmUser":{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},"repository":{"url":"git+https://github.com/37bytes/public-packages.git","type":"git"},"_npmVersion":"10.8.2","description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"lodash.debounce":"4.0.8"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.4","typescript":"5.6.2","@types/react":"^18.0.0","@types/lodash.debounce":"4.0.9"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/configurable-media-context_1.0.0_1725991414907_0.5647415144456758","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@37bytes/configurable-media-context","version":"2.0.0","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"author":{"name":"37bytes"},"license":"MIT","_id":"@37bytes/configurable-media-context@2.0.0","maintainers":[{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"}],"homepage":"https://github.com/37bytes/public-packages/tree/master/packages/configurable-media-context","bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"dist":{"shasum":"27d5bc48359a3557db1852d442d5cb795f0ea268","tarball":"https://registry.npmjs.org/@37bytes/configurable-media-context/-/configurable-media-context-2.0.0.tgz","fileCount":8,"integrity":"sha512-FcunriRS4MXoFtcR46mVhGMNxzRm5lnrZhW3IlX0x7UFAfM2Y9Jm/nhVB5svkiFIqPr/05tHMAou4wxmYy9IBQ==","signatures":[{"sig":"MEUCIE6xCp1a28K5Ag06Y2xUf4ooEbSEm6teGZQnyksYePQwAiEAxwzojRewyld+84KOsG+zBzqWg7jczYR7d7WaBLtcDtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17411},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"4e68999a6e11e12737689b9b3649f68413188ff0","scripts":{"build":"tsup","npm-packlist":"npm run build && npx -y npm-packlist@6.0.1"},"_npmUser":{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},"repository":{"url":"git+https://github.com/37bytes/public-packages.git","type":"git"},"_npmVersion":"10.8.2","description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"es-toolkit":"1.25.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.4","typescript":"5.6.2","@types/react":"^18.0.0","@types/lodash.debounce":"4.0.9"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/configurable-media-context_2.0.0_1729773792756_0.6564344097919326","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@37bytes/configurable-media-context","version":"2.0.1","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"author":{"name":"37bytes"},"license":"MIT","_id":"@37bytes/configurable-media-context@2.0.1","maintainers":[{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"}],"homepage":"https://github.com/37bytes/public-packages/tree/master/packages/configurable-media-context","bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"dist":{"shasum":"f49d516becd65e288598cc45b9a863e589841b69","tarball":"https://registry.npmjs.org/@37bytes/configurable-media-context/-/configurable-media-context-2.0.1.tgz","fileCount":8,"integrity":"sha512-1CJo+sOoepzMZAC4r8M8DoxrGfy/A2AKUIAKKR3R1RYGGbaeRg5zflvrXYPdqQeNnkrGMXW9GovP3XtYksHiwA==","signatures":[{"sig":"MEUCID5MY/gHy2bfsw59PnXT3waJnPg5h4kSUmh0ala+1IFpAiEAwakGOmp4CCvbivH5n2KdXqW2FYrYMk5yahcgQ4X1HiY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17277},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"aeb365ad41d8e23439adb3fdd899a46933c9c27f","scripts":{"build":"tsup","publish":"npm publish --access public","npm-packlist":"npm run build && npx -y npm-packlist@6.0.1"},"_npmUser":{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},"repository":{"url":"git+https://github.com/37bytes/public-packages.git","type":"git"},"_npmVersion":"11.3.0","description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"es-toolkit":"1.25.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.4","typescript":"5.6.2","@types/react":"^18.0.0","@types/lodash.debounce":"4.0.9"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/configurable-media-context_2.0.1_1745497358963_0.09610008861016839","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@37bytes/configurable-media-context","version":"2.0.2","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"author":{"name":"37bytes"},"license":"MIT","_id":"@37bytes/configurable-media-context@2.0.2","maintainers":[{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"}],"homepage":"https://github.com/37bytes/public-packages/tree/master/packages/configurable-media-context","bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"dist":{"shasum":"f2cb9b7c8fdd3eb6a3cb4de616605ee2e2226d68","tarball":"https://registry.npmjs.org/@37bytes/configurable-media-context/-/configurable-media-context-2.0.2.tgz","fileCount":8,"integrity":"sha512-WgSeCsmg4YWQDeQlVF8zRJott4NHyMe9yzbYz675hQlmxJt0hkaUiwxO8ow43gQvGDanYWbPVgD7jDBTG4qZPg==","signatures":[{"sig":"MEUCIEZp5FVDXcVBq3qqqU5GwT5lBj1+q+HKltlt7QG6Jzr2AiEAgZGQrYHX/eFZTqJYy4a8ZqumEcIi2jbrxB6oAW7w6CQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17277},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"aeb365ad41d8e23439adb3fdd899a46933c9c27f","scripts":{"build":"tsup","publish":"npm publish --access public","npm-packlist":"npm run build && npx -y npm-packlist@6.0.1"},"_npmUser":{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},"repository":{"url":"git+https://github.com/37bytes/public-packages.git","type":"git"},"_npmVersion":"11.3.0","description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"es-toolkit":"1.25.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.4","typescript":"5.6.2","@types/react":"^18.0.0","@types/lodash.debounce":"4.0.9"},"peerDependencies":{"react":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/configurable-media-context_2.0.2_1745497401027_0.5732854679198189","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@37bytes/configurable-media-context","version":"3.0.0","description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","repository":{"type":"git","url":"git+https://github.com/37bytes/public-packages.git","directory":"packages/configurable-media-context"},"license":"MIT","author":{"name":"37bytes"},"type":"module","sideEffects":false,"exports":{".":{"import":{"types":"./build/index.d.mts","default":"./build/index.mjs"},"require":{"types":"./build/index.d.cts","default":"./build/index.cjs"}}},"main":"./build/index.cjs","module":"./build/index.mjs","types":"./build/index.d.mts","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@types/react":"19.2.14","eslint":"9.39.2","tsdown":"0.20.3","typescript":"5.8.3","@37bytes/code-style":"0.0.1","@37bytes/bundler":"0.0.0"},"homepage":"https://github.com/37bytes/public-packages/tree/master/packages/configurable-media-context","bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"scripts":{"build":"tsdown","lint:typescript":"tsc --noEmit","lint:eslint":"eslint --fix --max-warnings 0 .","lint":"pnpm lint:typescript && pnpm lint:eslint","npm-packlist":"pnpm run build && npx -y npm-packlist@6.0.1"},"_id":"@37bytes/configurable-media-context@3.0.0","_integrity":"sha512-Zk55mnI9VrEBGhsB00WyWA0ZupiP3d76aSuFusX3H/zJCMK6Yelzv0Uw78oDImSuWE8k7WnktfV91Dshl0hHJw==","_resolved":"/private/var/folders/5t/b72kl4gn5fs7rnfrhvh9l6sc0000gn/T/34ae2720dc4892546958a523ce487228/37bytes-configurable-media-context-3.0.0.tgz","_from":"file:37bytes-configurable-media-context-3.0.0.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Zk55mnI9VrEBGhsB00WyWA0ZupiP3d76aSuFusX3H/zJCMK6Yelzv0Uw78oDImSuWE8k7WnktfV91Dshl0hHJw==","shasum":"218f05e4684dbc0e3fac49530b3cf1d4dbe48294","tarball":"https://registry.npmjs.org/@37bytes/configurable-media-context/-/configurable-media-context-3.0.0.tgz","fileCount":9,"unpackedSize":18770,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA11ioGA2d+thms+Vu9L444pWHPwPTXTIxwwmx9tthp4AiEAn15A2UndCvTSADoAn4AiJuW3io3HIisqdyN4wxHgLH8="}]},"_npmUser":{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},"directories":{},"maintainers":[{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/configurable-media-context_3.0.0_1773171355388_0.629746342732848"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-10T18:03:34.807Z","modified":"2026-03-10T19:35:55.744Z","1.0.0":"2024-09-10T18:03:35.159Z","2.0.0":"2024-10-24T12:43:12.973Z","2.0.1":"2025-04-24T12:22:39.155Z","2.0.2":"2025-04-24T12:23:21.209Z","3.0.0":"2026-03-10T19:35:55.537Z"},"bugs":{"url":"https://github.com/37bytes/public-packages/issues"},"author":{"name":"37bytes"},"license":"MIT","homepage":"https://github.com/37bytes/public-packages/tree/master/packages/configurable-media-context","keywords":["react","media-queries","responsive","context","provider","typescript","react-context","responsive-design"],"repository":{"type":"git","url":"git+https://github.com/37bytes/public-packages.git","directory":"packages/configurable-media-context"},"description":"A React context provider for managing media queries, allowing dynamic updates based on screen size.","maintainers":[{"name":"rteslenko","email":"rteslenko@37bytes.com"},{"name":"mgarmash","email":"ops@37bytes.com"},{"name":"dc.nikolaev","email":"dnikolaev@37bytes.com"},{"name":"tnikolaeva","email":"tnikolaeva@37bytes.com"},{"name":"arhonist-37b","email":"naushev@37bytes.com"},{"name":"yar_vav","email":"yavavilin@37bytes.com"},{"name":"rispaev","email":"rispaev@37bytes.com"}],"readme":"# @37bytes/configurable-media-context\n\nA lightweight React context provider for managing media queries, allowing dynamic updates based on screen size. This package provides a way to reactively track which media queries are active at any given time.\n\n## Installation\n\nTo install the package, run the following command:\n\n```shell\nnpm install @37bytes/configurable-media-context\n```\n\n## Usage\n\n```tsx\nimport { createMediaContextProvider, MediaQueriesMap } from 'configurable-media-context';\n\nexport enum Media {\n    MOBILE = 480,\n    TABLET = 768,\n    MEDIUM_DESKTOP = 1024,\n    LARGE_DESKTOP = 1280\n}\n\nconst mediaQueriesMap: MediaQueriesMap<Media> = {\n    [Media.MOBILE]: window.matchMedia(`(max-width: ${Media.MOBILE}px)`),\n    [Media.TABLET]: window.matchMedia(`(min-width: ${Media.TABLET}px)`),\n    [Media.MEDIUM_DESKTOP]: window.matchMedia(`(min-width: ${Media.MEDIUM_DESKTOP}px)`),\n    [Media.LARGE_DESKTOP]: window.matchMedia(`(min-width: ${Media.LARGE_DESKTOP}px)`)\n};\nconst {MediaContextProvider, useMediaContext: usePureMediaContext} = createMediaContextProvider(mediaQueriesMap);\n\n// ...\n\nconst getBreakpoint = (media: Media[]): Media => {\n    switch (true) {\n        case media.includes(Media.LARGE_DESKTOP):\n            return Media.LARGE_DESKTOP;\n        case media.includes(Media.MEDIUM_DESKTOP):\n            return Media.MEDIUM_DESKTOP;\n        case media.includes(Media.TABLET):\n            return Media.TABLET;\n        default:\n            return Media.MOBILE;\n    }\n};\n\nconst useMediaContext = () => {\n    const {media} = usePureMediaContext();\n\n    const breakpoint = getBreakpoint(media);\n\n    const isMobile = breakpoint === Media.MOBILE;\n    const isTablet = breakpoint === Media.TABLET;\n    const isMediumDesktop = breakpoint === Media.MEDIUM_DESKTOP;\n    const isLargeDesktop = breakpoint === Media.LARGE_DESKTOP;\n\n    const isHandheld = isMobile || isTablet;\n    const isDesktop = isMediumDesktop || isLargeDesktop;\n\n    return {\n        media,\n        breakpoint,\n\n        isMobile,\n        isTablet,\n        isMediumDesktop,\n        isLargeDesktop,\n\n        isHandheld,\n        isDesktop\n    };\n};\n\n// ..\n\nconst App = () => (\n    <MediaContextProvider>\n        <YourComponent/>\n    </MediaContextProvider>\n);\n```\n\n# Changelog\n## 3.0.0\n- Switched from `window.resize` + throttle to native `MediaQueryList` change events (fires only on breakpoint crossing, no polling)\n- Removed `es-toolkit` dependency\n- Removed `resizeThrottleDelay` prop (no longer needed)\n- Uses `useSyncExternalStore` for concurrent mode safety and automatic re-render deduplication\n\n## 2.0.0\n- lodash.debounce => throttle from [es-toolkit](https://es-toolkit.slash.page/)\n- 250ms delay => 100ms delay\n- resizeThrottleDelay for custom delay\n- resizeThrottleDelay with 0 disabling delay\n","readmeFilename":"README.md"}