{"_id":"@dbernardi/use-media-query","_rev":"7-40cb092c3eb9d8aca8cf938e50710f90","name":"@dbernardi/use-media-query","dist-tags":{"latest":"1.0.6"},"versions":{"0.0.1":{"name":"@dbernardi/use-media-query","version":"0.0.1","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@0.0.1","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"88c860c83c83859d02392da0670bf00012811206","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-0.0.1.tgz","fileCount":24,"integrity":"sha512-X5Mz0xj0WaBicFYe3zLS8oZIsRrnGCeZQ0DsyaSBcWUydIA3yilaQL/7xqecjhSRNvG8n3iiBCWFlPOSNOrS6Q==","signatures":[{"sig":"MEUCIQCLV60ixFIJrs7yIkYIpG5FCXFMAMGu2qO6rBMSefPxZgIgE6rZjWjcu7nhLvQFpVPeoA7kSL8M8xccaKITFM+T6oE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45316},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"bf68ed66a69886ebfe37c4af6a5d6e22e3f3f6e6","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","vitest":"^2.0.5","globals":"^15.9.0","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_0.0.1_1724457782419_0.012025702064518473","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@dbernardi/use-media-query","version":"1.0.0","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.0","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"076060907081c06da6eb62661a15030acaf52c9b","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.0.tgz","fileCount":24,"integrity":"sha512-mLbzCfEH/Y0uDY4+NNNQegZjdyxt+zDtaEDt+84hwhovjeIvx1X8o1p7FGaffoC6y46FYoFXMU4vZn1mECHeWA==","signatures":[{"sig":"MEQCIEP+9h7lnO3TU0dA9s36JgiVDX8Vb9hyEIYw/i6fA88GAiByTQqHRl72j/8zIukFrOXP9/9LiXRHI8Atn9wsd85s0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45318},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"7d1752b9f218d80577e6af65f7845076e14955ec","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","vitest":"^2.0.5","globals":"^15.9.0","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.0_1724458584062_0.1916788610983453","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@dbernardi/use-media-query","version":"1.0.1","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.1","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"5dca7fd266b66150f9739b51aae5d26837d06299","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.1.tgz","fileCount":24,"integrity":"sha512-TicdwYDzkVvw8U/BJLP22cD4Rm3erGGeuqoP92fU3D1BupL+drRR1QsCOGv5okxzhuueYgZeQ6t/gmxhAIcvkA==","signatures":[{"sig":"MEUCIQDYie3tUR7KeleRy1GzWmx8beuBftP2OwpL/4N9oq9otQIgGVArU5cVOk7DhgL0ZSjPe8Wd5CYrjZKjEaPD6Vdzkoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45357},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"0a25b86d68590f09a5b135eb3d3e8196fbc7cb71","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","vitest":"^2.0.5","globals":"^15.9.0","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.1_1724462844137_0.5216263296690735","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@dbernardi/use-media-query","version":"1.0.2","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.2","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"57a2ca578c69c12e8fa9e28a2b8f91f3e048b8ef","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.2.tgz","fileCount":24,"integrity":"sha512-8FXizwM5EbxNSiYR7YEng3OgFf97EAzepYk3sZ3FjIAzQ9ex92rz8jRiua9m6sbEUN8k5bQ9LiASOmpkoaOc8A==","signatures":[{"sig":"MEUCIGdLcDJvN1EAfoenzWkpdEtDZgiXzjdKoBrpbyU5lzTjAiEAkZiukUxqYad9YsX9THH33X3X9pU/3k/m1NlMPcO8jag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45537},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"7b8f617cb62f8abb9c5ac4ba6ff5e7a652e1c45f","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","vitest":"^2.0.5","globals":"^15.9.0","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.2_1724467115831_0.18983754642798978","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@dbernardi/use-media-query","version":"1.0.3","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.3","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"b0e064dd0e100721efe35b00cf1eab47480cc0b5","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.3.tgz","fileCount":24,"integrity":"sha512-VVXPh+cUK+zJ4j/1PYldyXaQwJ0HuQWbISp7CI+9HbW1jJVkLDQ7659kPKMGHLjWZlDrkPl9+VR9jteHrEhKug==","signatures":[{"sig":"MEUCIHbu+gC08rLzPbdWn2KphJDybnmaEMhH7KJLUFVcegN3AiEA5s/sVvFMLuv6zt8Eu/ZQV0UOBcCzsqhvoWZ5UL32wGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45593},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"79a266ff4db3307dd87e9f13d2a68eaf57f0df03","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","react":"^18.3.1","vitest":"^2.0.5","globals":"^15.9.0","react-dom":"^18.3.1","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.3_1724467424957_0.3591897828423758","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@dbernardi/use-media-query","version":"1.0.4","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.4","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"dist":{"shasum":"84ac26d8dd4a29975897f35606329a6865bd7ad7","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.4.tgz","fileCount":24,"integrity":"sha512-Ox0ejnoBLu+5HtZsOQMcc1XB5UyiEBUQhKLJ2WOHC2vjex7ee8nmV0AM+0dRuZkgYX3NS9UXLm3HfXtqN+XkBA==","signatures":[{"sig":"MEUCIEUWkraFlEU+dyG+tYlRi5nBSV6M3XY6xGPikV/KtRhOAiEAxiS8YfYjzSgA9xT/sIIjTGhxZaD+9/rdmY/yy75AYHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46709},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"96f62d64d6c43f59a032d4b1e0dd316f35232d69","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","react":"^18.3.1","vitest":"^2.0.5","globals":"^15.9.0","react-dom":"^18.3.1","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.4_1724467834416_0.7372464201463291","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@dbernardi/use-media-query","version":"1.0.5","author":{"name":"Daniel Bernardi"},"license":"MIT","_id":"@dbernardi/use-media-query@1.0.5","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"homepage":"https://github.com/danbernardi/use-media-query#readme","bugs":{"url":"https://github.com/danbernardi/use-media-query/issues"},"dist":{"shasum":"1d4d10dcb58c2075c9820f02f62a123895fb6150","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.5.tgz","fileCount":24,"integrity":"sha512-PplEkBDK5gTgJL4JnGeO9nWuQU242T4PEfnXl4Mafcdxrb/dX7I9ejoam9HNkEknq9GdfqykXe8vdHMOamSGzg==","signatures":[{"sig":"MEQCIAf8aS8amr9G68VkrwZBiOjsS/MEiex7DJvWzyF7SlktAiA7Ao+BW03gz3hQPGb2qRMwBxiCHhjssB5G7HxipPxKlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46815},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"655ac88bef871210d5fc0c9bb3a2f69ea579c63e","private":false,"scripts":{"dev":"vite","lint":"tsc","test":"vitest","build":"tsup src/lib/index.ts --format cjs,esm --dts","preview":"vite preview","release":"pnpm run build && changeset publish"},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"repository":{"url":"git+https://github.com/danbernardi/use-media-query.git","type":"git"},"_npmVersion":"10.7.0","description":"A custom React hook for managing javacript based media queries","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","vite":"^5.4.0","react":"^18.3.1","vitest":"^2.0.5","globals":"^15.9.0","react-dom":"^18.3.1","typescript":"^5.5.3","@types/react":"^18.3.3","@changesets/cli":"^2.27.7","@types/react-dom":"^18.3.0","typescript-eslint":"^8.0.0","@vitejs/plugin-react":"^4.3.1"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_npmOperationalInternal":{"tmp":"tmp/use-media-query_1.0.5_1724468050775_0.22156899988328282","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@dbernardi/use-media-query","version":"1.0.6","private":false,"type":"module","repository":{"type":"git","url":"git+https://github.com/danbernardi/use-media-query.git"},"description":"A custom React hook for managing javacript based media queries","author":{"name":"Daniel Bernardi"},"license":"MIT","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"tsup src/lib/index.ts --format cjs,esm --dts","release":"pnpm run build && changeset publish","lint":"tsc","preview":"vite preview","test":"vitest"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@changesets/cli":"^2.27.7","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","globals":"^15.9.0","tsup":"^8.2.4","typescript":"^5.5.3","typescript-eslint":"^8.0.0","vite":"^5.4.0","vitest":"^2.0.5","react":"^18.3.1","react-dom":"^18.3.1"},"_id":"@dbernardi/use-media-query@1.0.6","gitHead":"05c3c2e4185c477c4bc6da59fb29c7561215d10f","bugs":{"url":"https://github.com/danbernardi/use-media-query/issues"},"homepage":"https://github.com/danbernardi/use-media-query#readme","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-1blKpf7BFhoBcrMTlKVFdeW/liWZwaoFVxJtmrYV4eqs8+r6i9pPYQXtZ7mSIPtne2/klJGWUkdH8I05Z8YEoA==","shasum":"39bf41fc81ae62f87ae96e0e5b84566f98bae1ea","tarball":"https://registry.npmjs.org/@dbernardi/use-media-query/-/use-media-query-1.0.6.tgz","fileCount":24,"unpackedSize":46978,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRQAVgLcswmKMnoqOCvQfMYMdelfLvTb9LPg0ujBYI8AIhAI1ss7q42ErvVgekyw0XWd0xSIk/1VfFhpr6Ngzvh3BY"}]},"_npmUser":{"name":"dbernardi","email":"danbernardi1@gmail.com"},"directories":{},"maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-media-query_1.0.6_1724470750261_0.557911748435145"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-24T00:03:02.264Z","modified":"2024-08-24T03:39:10.580Z","0.0.1":"2024-08-24T00:03:02.577Z","1.0.0":"2024-08-24T00:16:24.191Z","1.0.1":"2024-08-24T01:27:24.404Z","1.0.2":"2024-08-24T02:38:36.015Z","1.0.3":"2024-08-24T02:43:45.129Z","1.0.4":"2024-08-24T02:50:34.618Z","1.0.5":"2024-08-24T02:54:10.975Z","1.0.6":"2024-08-24T03:39:10.431Z"},"bugs":{"url":"https://github.com/danbernardi/use-media-query/issues"},"author":{"name":"Daniel Bernardi"},"license":"MIT","homepage":"https://github.com/danbernardi/use-media-query#readme","repository":{"type":"git","url":"git+https://github.com/danbernardi/use-media-query.git"},"description":"A custom React hook for managing javacript based media queries","maintainers":[{"name":"dbernardi","email":"danbernardi1@gmail.com"}],"readme":"# useMediaQuery\nuseMediaQuery is a custom react hook that allows the use of css media queries in a react environment. It uses the `matchMedia` api to subscribe to media queries and returns the current breakpoint state. It also provides helper functions to make it easier to use the breakpoint state in your components.\n\n### Installation\n```\npnpm add @dbernardi/use-media-query\n```\n\n## Usage\nWhile the `useMediaQuery` hook can be called directly by each component that needs to use it, it is recommended to utilize a global state library to manage the state of the hook in a centralized location. This allows the hook to be consumed by any component in the app, and makes sure the media query state is only subscribed to once.\n\nYou can use any state library, for example Redux or Zustand. However, the simplest way to do this is to use [React context](https://react.dev/reference/react/useContext), which is a built-in feature of React.\n\nExamples are provided in typescript below, but the same concepts apply to javascript. Just remove the type annotations.\n\n1. Create a context provider that subscribes to the useMediaQuery hook.\n``` jsx\n// context.tsx\nimport { createContext } from 'react';\nimport { useMediaQuery } from '@dbernardi/use-media-query';\nimport type { UseMediaQueryReturnType, Options } from '@dbernardi/use-media-query';\n\nexport const MediaQueryContext = createContext<UseMediaQueryReturnType>({} as UseMediaQueryReturnType);\n\nexport const MediaQueryProvider = ({ children, options }: { children: React.ReactElement, options?: Options }) => {\n  const mediaQuery = useMediaQuery(options ?? {});\n  \n  return (\n    <MediaQueryContext.Provider value={mediaQuery}> \n      { children }\n    </MediaQueryContext.Provider>\n  )\n}\n```\n\n2. Wrap the provider around a component high in your app chain and pass in the options you want to use.\n``` jsx\n// App.tsx\nimport { MediaQueryProvider } from './context';\n\nfunction App({children}: {children: React.ReactElement}) {\n  return (\n    <MediaQueryProvider options={{ breakpoints: { sm: 600, md: 900, lg: 1200 }, rule: 'max-width' }}>\n      {children}\n    </MediaQueryProvider>\n  )\n}\n\nexport default App;\n```\n\n\n3. Now, you can use react's `useContext` hook in conjuction with `MediaQueryContext` to consume the breakpoint state:\n``` jsx\nimport { MediaQueryContext } from './context';\nimport { useContext } from 'react';\n\nfunction Component() {\n  const {\n    setClass,\n    bpIsGT,\n    bpIsLT,\n    breakpoints,\n  } = useContext(MediaQueryContext);\n\n  return (\n    <div style={{ backgroundColor: setClass({default: 'pink', lg: 'red', md: 'blue', sm: 'green'}) }}>\n      {bpIsGT('md') && <h1>Show me above md - {breakpoints.md}</h1>}\n      {bpIsLT('md') && <h1>Show me below md - {breakpoints.md}</h1>}\n    </div>\n  )\n}\n\nexport default Component;\n```\n\n## Options\nThe following options can be passed to the useMediaQuery hook:\n\n| Option | Description |\n| --- | --- |\n| breakpoints | An object containing the breakpoints you want to use. The key should be the name of the breakpoint and the value should be the size in pixels. |\n| rule | The rule to use when subscribing to the media query. Can be either 'min-width' or 'max-width' to denote whether to use a mobile-first or desktop-first media query. Media queries will be constucted as followed: ``only screen and (${rule}: ${breakpoints[key]}px)``. | \n\n### Default options\n\nThe default options are as follows:\n\n*breakpoints*\n``` ts\nconst defaultBreakpoints = {\n  desktopLg: 1400,\n  desktopMd: 1300,\n  desktopSm: 1200,\n  tabletLg: 1040,\n  tabletMd: 991,\n  tabletSm: 840,\n  mobileLg: 767,\n  mobileMd: 540,\n  mobileSm: 400,\n  mobileXsm: 350\n};\n```\n\n*rule*\n``` ts\n'max-width'\n```\n\n\n## Helper functions & return values\n\nIn order to allow your components to make use of the breakpoint state, we've provided a series of helper functions, these are automatically returned from the `useMediaQuery` hook.\n\n```\nconst {\n  currentBreakpoint,\n  bpIsGT,\n  bpIsLT,\n  setClass,\n  breakpoints,\n} = useContext(MediaQueryContext);\n```\n\n### currentBreakpoint\n`currentBreakpoint` is an object that contains the current breakpoint state. It has the following properties:\n\n| Property | Description |\n| --- | --- |\n| name | The name of the current breakpoint. This matches one of the keys in the `breakpoints` object passed to the `useMediaQuery` hook. |\n| value | The size of the current breakpoint in pixels. |\n| query | The `MediaQueryList` object that is subscribed to the current breakpoint. |\n| rule | The rule used to subscribe to the current breakpoint. This is the same as the `rule` option passed to the `useMediaQuery` hook. |\n\n#### bpIsGT - breakpointIsGreaterThan\nThis function returns a boolean indicating whether the currently active breakpoint is larger than the passed breakpoint param. The breakpoint param is a `string` that matches one of the keys in `breakpoints`.\n\n```jsx\nbpIsGt('md')\n  ? <p>I will only appear on screens larger than 900px</p>\n  : <p>I will only appear on screens smaller than 900px</p>\n```\n\n#### bpIsLT - breakpointIsLessThan\nThis function returns a boolean indicating whether the currently active breakpoint is smaller than the passed breakpoint param. The breakpoint param is a `string` that matches one of the keys in `breakpoints`.\n\n```jsx\nbpIsLt('md')\n  ? <p>I will only appear on screens smaller than 900px</p>\n  : <p>I will only appear on screens larger than 900px</p>\n```\n\n#### setClass\nThis function is used to return a string (often but not limited to a className) that matches / is adjacent to the currently active breakpoint.\n\nIt accepts an object as a param with key value pairs describing which strings should be returned for which matched breakpoints. For each breakpoint, the value of the match will be returned. When the `rule` option is set to `max-width`, the breakpoints are read in reverse order, with larger breakpoints active first. This behavior is reversed when the `rule` option is set to `min-width`, with smaller breakpoints being active first. When a breakpoint is active, it will remain active until the next breakpoint key finds a match. It is not necessary to provide values for all of the available breakpoints, only the breakpoints at which point the string should change.\n\nThis is most commonly used to change the className of an element based on the active breakpoint:\n``` jsx\n<div className={ setClass({\n    default: 'larger-than-md',\n    md: 'md-and-below-but-greater-than-sm',\n    sm: 'sm-and-below'\n  }) }>\n  Some content\n</div>\n```\n\nHowever, it can also be used anywhere a string can be used. Another example is to use setClass in association with inline styles:\n\n``` jsx\nimport { MediaQueryContext } from './context.ts';\n\nconst Component = (props) => {\n  const { setClass } = useContext(MediaQueryContext);\n\n  const dynamicStyles = {\n    width: setClass({ default: '300px', md: '500px' })\n  };\n\n  return (\n    <div style={ dynamicStyles }>\n      Some content\n    </div>\n  )\n}\n```\n\n#### breakpoints\n`breakpoints` is an object that lists all the available breakpoints. This is identical to the `breakpoints` option passed to the `useMediaQuery` hook.","readmeFilename":"README.md"}