{"id":21270454,"url":"https://github.com/dan503/mq-js","last_synced_at":"2025-07-11T05:32:00.722Z","repository":{"id":47290337,"uuid":"82659977","full_name":"Dan503/mq-js","owner":"Dan503","description":"Media queries in JavaScript inspired by the mq-scss Sass mixin","archived":false,"fork":false,"pushed_at":"2021-09-04T11:07:42.000Z","size":5058,"stargazers_count":6,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T01:22:34.760Z","etag":null,"topics":["breakpoints","javascript","media","mq-scss","query","responsive"],"latest_commit_sha":null,"homepage":"https://dan503.github.io/mq-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dan503.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-21T09:17:45.000Z","updated_at":"2023-01-14T22:35:50.000Z","dependencies_parsed_at":"2022-09-26T18:21:24.423Z","dependency_job_id":null,"html_url":"https://github.com/Dan503/mq-js","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fmq-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fmq-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fmq-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fmq-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dan503","download_url":"https://codeload.github.com/Dan503/mq-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225693743,"owners_count":17509228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoints","javascript","media","mq-scss","query","responsive"],"created_at":"2024-11-21T08:17:30.365Z","updated_at":"2024-11-21T08:17:31.159Z","avatar_url":"https://github.com/Dan503.png","language":"JavaScript","readme":"[![Visit the mq-js website](readme-logo-image.jpg)](https://dan503.github.io/mq-js/)\n\nmq-js was inspired by the [mq-scss](https://www.npmjs.com/package/mq-scss) Sass mixin. I wanted to use media queries in JavaScript in a similar sort of way to how I was using media queries in my Sass code.\n\nFull documentation for mq-js can be found at https://dan503.github.io/mq-js/\n\n```js\n// MQ-JS\n\nif (mq.inside(600, 1000)) {\n   // Functionality for screens between 600px and 1000px\n}\n```\n\n```scss\n// MQ-SCSS\n\n@include mq(inside, 600px, 1000px) {\n   // Styles for screens between 600px and 1000px\n}\n```\n\n## Quick start guide\n\nThis documentation assumes that you have the ability to use ES6 JavaScript syntax in your project. mq-js will work in environments that don't support es6 JavaScript syntax however the syntax will be different to what is documented. [View the full documentation](https://dan503.github.io/mq-js/#quick-start) for ES5 (IE friendly) examples.\n\nIf you are new to Node and npm, [read this beginners guide on how to get set up](https://codeburst.io/getting-started-with-node-js-a-beginners-guide-b03e25bca71b). You will also need JavaScript bundling software such as [Browserify](http://browserify.org/), [Rollup](https://rollupjs.org/guide/en), or [Webpack](https://webpack.js.org/) integrated into your build process for mq-js to work.\n\nOnce that is all set up, install mq-js using npm.\n\n    npm install mq-js --save\n\nNow, create this simple mq.js file to set up your website breakpoints.\n\n```js\n///////////////////\n// \"mq.js\" file //\n/////////////////\n\nimport MQ from 'mq-js'\n\n// Define your Site break points here\nconst bp = {\n   small: 600,\n   medium: 980,\n   large: 1200,\n}\n\n// Creates the media query functions\nconst mq = new MQ(bp)\n\n// Export mq by default\nexport default mq\n\n// Gives easy access to your site breakpoints\nexport { mq, bp }\n```\n\nNow import the `mq` variable into your main/component JavaScript file.\n\n```js\n////////////////////////\n// Component js file //\n//////////////////////\n\n// Import the mq variable that was created in the setup stage\nimport mq from '../mq'\n\n// Alternatively import both the mq variable and the website breakpoints\n// (Use one line or the other, do not use both import statements)\nimport { mq, bp } from '../mq'\n\ndocument.querySelector('#button').onclick = function (e) {\n   e.preventDefault()\n\n   // Use your breakpoints by parsing in a string\n   mq.min('medium', (screen_size) =\u003e {\n      this.classList.toggle('-active')\n\n      // Log the screen height, width and ratio at the time the button was clicked\n      console.log(screen_size)\n   })\n\n   // Alternatively, use it in an if statement\n   if (mq.max('small')) {\n      // Do stuff for screens that are up to (and including) the \"small\" breakpoint width\n   }\n\n   // You can also use custom values\n   if (mq.min(1000)) {\n      // Do stuff for screens that are greater than 1000px wide\n   }\n\n   // If you imported the breakpoints, you can use tweaked versions of them\n   if (mq.inside(bp.small + 50, bp.medium - 100)) {\n      // Do stuff for screens that are between the \"small\" breakpoint + 50px\n      // and the \"medium\" breakpoint - 100px\n   }\n}\n```\n\n**Note:** `mq.max` is _inclusive_ of the given screen size and `mq.min` is _exclusive_ of the given screen size. This is to avoid any potential 1px overlap issues where both statements return true at the same time. It is also designed to align with how mq-scss works.\n\nIt is also worth noting that you can save your breakpoints into a json file and import that instead. This can make the breakpoints a bit more portable.\n\n```json\n{\n   \"//\": \"breakpoints.json file\",\n   \"small\": 600,\n   \"medium\": 980,\n   \"large\": 1200\n}\n```\n\n```js\n///////////////////\n// \"mq.js\" file //\n/////////////////\n\nimport MQ from 'mq-js'\n\n// Retrieve your site break points\nimport bp from './breakpoints.json'\n\nconst mq = new MQ(bp)\n\n// Export mq by default\nexport default mq\n\n// Easier access to your site breakpoints\nexport { mq, bp }\n```\n\n## Core methods\n\n-  [mq.max](https://dan503.github.io/mq-js/#mq-max)\n-  [mq.min](https://dan503.github.io/mq-js/#mq-min)\n-  [mq.inside](https://dan503.github.io/mq-js/#mq-inside)\n-  [mq.outside](https://dan503.github.io/mq-js/#mq-outside)\n\n**Note:** You can add `Width` to the end of any of those methods and it will still be valid. For example, it is safe to use `mq.minWidth` instead of `mq.min`. The `mq.minWidth` method has identical functionality to `mq.min`.\n\n## Plugins\n\n### Height plugin\n\n```js\nimport 'mq-js/plugins/height'\n```\n\nThe height plugin provides these methods:\n\n-  mq.minHeight\n-  mq.maxHeight\n-  mq.insideHeight\n-  mq.outsideHeight\n\n[Read the full height plugin documentation.](https://dan503.github.io/mq-js/#height-plugin)\n\n### Orientation plugin\n\n```js\nimport 'mq-js/plugins/orientation'\n```\n\nThe orientation plugin provides these methods:\n\n-  mq.orientation\n\n[Read the full orientation plugin documentation.](https://dan503.github.io/mq-js/#orientation-plugin)\n\n### Ratio plugin\n\n```js\nimport 'mq-js/plugins/ratio'\n```\n\nThe ratio plugin provides these methods:\n\n-  mq.ratio\n-  mq.minRatio\n-  mq.maxRatio\n-  mq.insideRatio\n-  mq.outsideRatio\n\n[Read the full ratio plugin documentation.](https://dan503.github.io/mq-js/#ratio-plugin)\n\n### reactTo plugin\n\n```js\nimport 'mq-js/plugins/reactTo'\n```\n\nThis gives you access to:\n\n-  mq.reactTo\n\nThis plugin is a bit different. The primary purpose of this plugin is to fire off a function when a media query either enters or leaves a defined screen size range.\n\nIt takes a function that returns an mq-js screen-check result as it's first parameter and a callback function as it's second parameter. It will then call the callback function every time the screen-check result changes from `true` to `false` or `false` to `true`.\n\n```js\nmq.reactTo(\n   () =\u003e mq.inside(800, 1000),\n   (is_active, screen_size) =\u003e {\n      // is_active = did \"mq.inside(800, 1000)\" return true?\n      // screen_size = an object holding the screen height, width,\n      //   and ratio (ratio in both string and number format) at the\n      //   point when the screen crossed an mq boundary\n      console.log(is_active, screen_size)\n   }\n)\n```\n\n[See a reactTo plugin demo in the full documentation.](https://dan503.github.io/mq-js/#reactto-plugin)\n\nThe mq-js change log is available on the [mq-js GitHub releases page](https://github.com/Dan503/mq-js/releases)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Fmq-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan503%2Fmq-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Fmq-js/lists"}