{"_id":"respondable","_rev":"14-4516c0f157076b4ed30c286a46d41426","name":"respondable","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.1":{"name":"respondable","version":"0.0.1","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"a5491eba8e7a7faf08ff6a23a2cf001b49f9e287","_id":"respondable@0.0.1","_shasum":"10b0e2350f1725a507b283c2b2de98070963d6e8","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"10b0e2350f1725a507b283c2b2de98070963d6e8","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.0.1.tgz","integrity":"sha512-FQ5GFvI7+T45pUVddZW4ZTiqJa2Y5r8hyKe5UWWndmC5xxog4SxIoU41dNtyDeWGoVpjWBbPsZMaCLuEnBZXAw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEL7lPYLcADlIeqxvB+QsaR3zSmyd6p4MmVB3j251zfCAiBa+kUc6DqM61G4Msv3sGzvjMPm3Nqy+fPW3lLte/ee7A=="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/respondable-0.0.1.tgz_1456436842760_0.5565869791898876"}},"0.1.0":{"name":"respondable","version":"0.1.0","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"75b96bceadffd9af2fa01053ca32274df572ce81","_id":"respondable@0.1.0","_shasum":"d2ae5472e98e8757c73728a39f42ce812375db0f","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"d2ae5472e98e8757c73728a39f42ce812375db0f","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.1.0.tgz","integrity":"sha512-v9n6H0d6bdef7/eLpOtRSbmSzug5Bi8Y9rnFTfMDd3w/8F0z68yoR68R9x31p1UdDFlOUhRIwcWqsZu8QnlPuQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfT+PA7DymyNAXhqQG2/c3u2MTkYeZrJdV/FRlCNf2EAiEAnGvn0e4t39ZROyXd4MBITGWU3LnPa1MydiyAVLkk680="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-5-east.internal.npmjs.com","tmp":"tmp/respondable-0.1.0.tgz_1456499559677_0.19983101240359247"}},"0.1.1":{"name":"respondable","version":"0.1.1","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"730f31d3734fa73073af1e673ad2ca3baf25cde1","_id":"respondable@0.1.1","_shasum":"0a3ca7993622baf10e65e2cbf53f7378dcdd762b","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"0a3ca7993622baf10e65e2cbf53f7378dcdd762b","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.1.1.tgz","integrity":"sha512-4ij8khAdFmc7P8PvUFbcaExfvL8bhlGYmUTaiajVdecNEzMwY2pVqomzQQ+9VozVEmCaZxXhHEBzq1Jg/QN7+g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUInCXBluoMcsZqA88AD/lYTtw1aQ8g4nI9+mSM2BAygIhAPEA1/Y7eIzUMbScUq1f8bOhQZocSnoJGRBLpxJ++eZa"}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-5-east.internal.npmjs.com","tmp":"tmp/respondable-0.1.1.tgz_1456503088359_0.7192250965163112"}},"0.1.2":{"name":"respondable","version":"0.1.2","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"e39187cc739397dd265d39b26b19ab3768d67e58","_id":"respondable@0.1.2","_shasum":"26089bcdbb85fcf519c30d50563826a78f8b7f52","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"26089bcdbb85fcf519c30d50563826a78f8b7f52","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.1.2.tgz","integrity":"sha512-wsf0I0krxkmbBSjqiDCadTVKUDET4QR4zuPwtd1HLFRAIZJCOwmCeTdJBpcfHm1kAsTFNFRIO2KcSui+fmKo1g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBq1rvl5n5YySzsCn8sy6qR1TaGrmkV0EHodwxHPDD49AiEApsveDG6raHlR4OwXkx3TWGtmMD2Lhx9QMc+MDtUGp/c="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/respondable-0.1.2.tgz_1456511426176_0.4210241644177586"}},"0.1.3":{"name":"respondable","version":"0.1.3","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"2ee475c4f50b1d4a60f72000f59d7cca3beee698","_id":"respondable@0.1.3","_shasum":"c9305902b46358938e1c2d2147254a23ca932669","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"c9305902b46358938e1c2d2147254a23ca932669","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.1.3.tgz","integrity":"sha512-97AJI0iZbjLB+I/duDy9QJhcuHdoCJvtJE15S2j4TcVlp985jBhoapl2YGI5YfS/DSl2LgMX1HGhQxz0llj5NQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu4m8aA0J9r4e4A/x3AMOo4W8OeXGtHo3Bx2KImh5NYAIgIsx+eqBB8UotGWdRZ2/5jyd7RvuIPaqs6++o5i753Mg="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/respondable-0.1.3.tgz_1456515915998_0.9812189561780542"}},"0.1.4":{"name":"respondable","version":"0.1.4","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["responsive","matchMedia"],"author":{"name":"Brandon Dail","email":"brandon.dail@conciergeauctions.com"},"license":"MIT","gitHead":"85ba9c04361520fb7370f456300d0058be849a8b","_id":"respondable@0.1.4","_shasum":"37124651609ecbb44a2259aa3cadb439dc4cb68b","_from":".","_npmVersion":"3.5.3","_nodeVersion":"4.1.1","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"37124651609ecbb44a2259aa3cadb439dc4cb68b","tarball":"https://registry.npmjs.org/respondable/-/respondable-0.1.4.tgz","integrity":"sha512-vahZuvxqsMhvm63esbQg9PG+8zsfXZlCbja/FBHqbkEQ8mq3CkwWthL9aVennJQ9Rnb48pRCsmQrvlzyhUzN5g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhTtDgBTgAk7CHlbjRSvpI/ezZC9ykxNyE5SJkPElITAiEA2ekuGAlgUlJRgbkUTgP4bE0+EaMUUcUg4E7SEPokVVw="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/respondable-0.1.4.tgz_1463178503180_0.579677754547447"}},"1.0.0":{"name":"respondable","version":"1.0.0","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"dist/index.min.js","scripts":{"clean":"rimraf ./lib ./dist ./coverage ./.nyc_output","coverage-report":"nyc report --reporter=html","compile":"mkdir lib && browserify ./src/index.js -s respondable -o lib/index.js -t [ babelify --presets [ es2015 stage-0 stage-1 ] ]","uglify":"mkdir dist && uglifyjs ./lib/index.js -o ./dist/index.min.js","lint":"eslint src/index.js test","build":"npm run clean && npm run compile && npm run lint && npm test && npm run uglify","build:watch":"nodemon -i lib -i dist --exec  npm run build","test":"nyc ava","test:watch":"nyc ava --watch"},"ava":{"source":"src","files":"test/*.spec.js","require":["babel-register"],"babel":"inherit"},"nyc":{"exclude":["**/*.spec.js","node_modules","lib","dist","example","coverage"]},"keywords":["responsive","matchMedia","breakpoint"],"contributors":[{"name":"Brandon Dail","email":"cottoncrypt@gmail.com"},{"name":"Nathan Schwartz","email":"nathan.schwartz95@gmail.com"}],"license":"MIT","devDependencies":{"ava":"^0.16.0","babel-eslint":"^7.0.0","babel-polyfill":"^6.16.0","babel-preset-es2015":"^6.1.4","babel-preset-stage-0":"^6.16.0","babel-preset-stage-1":"^6.16.0","babelify":"^7.3.0","browserify":"^13.1.0","eslint":"^3.7.1","eslint-config-airbnb":"^12.0.0","eslint-plugin-import":"^2.0.0","nodemon":"^1.11.0","nyc":"^8.3.1","rewire":"^2.5.2","rimraf":"^2.5.4","uglify-js":"^2.6.2"},"gitHead":"92240b2d41b470b729e506da532ca6f04542a526","_id":"respondable@1.0.0","_shasum":"3d97c5fa9e1502c093ab549f55f3ddce0336e4c6","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"brad.decker","email":"bhdecker84@gmail.com"},"dist":{"shasum":"3d97c5fa9e1502c093ab549f55f3ddce0336e4c6","tarball":"https://registry.npmjs.org/respondable/-/respondable-1.0.0.tgz","integrity":"sha512-V2HLX7QSbFImkpK+8xcynsgW6ArKjyG9wh0O3a91ZYWjInDhgQSoxw/1oSnhMwZ4jF9V9o8K/hpkETHfKc4osg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEnpj1X3baY5NjDy/IXuh4jprOcVEzwVWejqeC2WzInAiEAqbEtULEOkafaxPZKix7GHmvtVrHowA93X35ZMUi5dks="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/respondable-1.0.0.tgz_1478118349741_0.9401385467499495"}},"1.0.1":{"name":"respondable","version":"1.0.1","description":"Utilizes matchMedia to performantly return conditional values based on media queries.","main":"dist/index.min.js","scripts":{"clean":"rimraf ./dist ./coverage ./.nyc_output","coverage-report":"nyc report --reporter=html","coveralls":"nyc report --reporter=lcov && cat ./coverage/lcov.info | coveralls","compile":"mkdir dist && browserify ./src/index.js -s respondable -o dist/index.min.js -t [ babelify --presets [ es2015 stage-0 stage-1 babili ] ]","lint":"eslint src test","build":"npm run clean && npm run compile && npm run lint && npm test","build:watch":"nodemon -i dist --exec  npm run build","test":"nyc ava","test:watch":"nodemon --exec nyc ava"},"ava":{"source":"src","files":"test/*.spec.js","require":["babel-register"],"babel":"inherit"},"nyc":{"exclude":["**/*.spec.js","node_modules","dist","example","coverage"]},"keywords":["responsive","matchMedia","breakpoint","query","media","viewport"],"contributors":[{"name":"Brandon Dail","email":"cottoncrypt@gmail.com"},{"name":"Nathan Schwartz","email":"nathan.schwartz95@gmail.com"}],"license":"MIT","devDependencies":{"ava":"^0.16.0","babel-eslint":"^7.0.0","babel-polyfill":"^6.16.0","babel-preset-es2015":"^6.1.4","babel-preset-stage-0":"^6.16.0","babel-preset-stage-1":"^6.16.0","babelify":"^7.3.0","babili":"0.0.9","browserify":"^13.1.0","coveralls":"^2.11.15","eslint":"^3.12.1","eslint-config-airbnb":"^13.0.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^2.2.3","eslint-plugin-react":"^6.8.0","nodemon":"^1.11.0","nyc":"^8.3.1","rimraf":"^2.5.4","sinon":"^1.17.6"},"gitHead":"4dccf203a9aa422ebeb60ef61eec7691fcae397e","_id":"respondable@1.0.1","_shasum":"665b67dfebb347950dc906688446afe783594afb","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"nathan-schwartz","email":"Nathan.Schwartz95@gmail.com"},"dist":{"shasum":"665b67dfebb347950dc906688446afe783594afb","tarball":"https://registry.npmjs.org/respondable/-/respondable-1.0.1.tgz","integrity":"sha512-vGqfG5HOi7vNkSQargfZvk7LL40jyyK8QG3Fl+I8LAoPwN/YkTIDLisATpeYx28ifj3WIvGYOXfqjPDNxZm9jw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFp194LSdKHe5Q0npjw1gQk7r4UI49Xz29z+ntfEkC6FAiEA6Qm/J8VS67WQPHAj6VvfpGFe/S7Kp3xQcCj5kC3x+3Q="}]},"maintainers":[{"name":"aweary","email":"Kierkegaurd@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"},{"name":"nathan-schwartz","email":"Nathan.Schwartz95@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/respondable-1.0.1.tgz_1481927005547_0.07031395193189383"}}},"readme":"[![npm version](https://badge.fury.io/js/respondable.svg)](https://badge.fury.io/js/respondable) [![Build Status](https://travis-ci.org/ConciergeAuctions/respondable.svg?branch=master)](https://travis-ci.org/ConciergeAuctions/respondable) [![Coverage Status](https://coveralls.io/repos/github/ConciergeAuctions/respondable/badge.svg?branch=master)](https://coveralls.io/github/ConciergeAuctions/respondable?branch=master) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/5e57f35560ff437ba63f0b40bea027f4)](https://www.codacy.com/app/Concierge-Auctions/respondable_2?utm_source=github.com&utm_medium=referral&utm_content=ConciergeAuctions/respondable&utm_campaign=Badge_Grade) [![Dependencies](https://img.shields.io/david/ConciergeAuctions/respondable.svg)](https://david-dm.org/ConciergeAuctions/respondable#info=dependencies)\n\n# respondable\n\nA small utility that makes dealing with media queries programmatically a breeze. `respondable` accepts an object with media query configuration(s) and a callback. The callback will trigger whenever a media query becomes inactive or active, and will have all active media queries passed in.\n\nrespondable doesn't use any `resize` event handlers. Instead it relies on the `addListener` method of the `MediaQueryList` object returned by `matchMedia` (see [docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)).\n\n**Note: `matchMedia` is a hard dependency of respondable.**\n\n\n## Table of contents\n  1. [Installation](#installation)\n  2. [Changelog](#changelog)\n  3. [Documentation](#documentation)\n  4. [Best practices](#best-practices)\n  5. [Demo](#demo)\n  6. [Contributing](#contributing)\n\n\n## Installation\n\n`$ npm install --save respondable`\n\n## Changelog\n> Respondable now has a 3rd parameter. It is optional and used to specify the priority of each breakpoint. This is only useful for breakpoint configurations with competing queries.\n\n> Instead of returning an ID that needs to be passed into `respondable.destroy`, `respondable` will return a `destroy` function that is already bound to your respondable instance. See the example [below](#example).\n\n> Support for default value as a property of the `breakpoints` object has been deprecated. (See Best Practices for more details.)\n\n> In the previous version, respondable had been passing the value of a single query into the callback when multiple queries matched. Now an array of all matching values will be passed in to the callback.\n\n## Documentation\n\n### Summary\nCreates a MediaQueryList for each media query in `breakpoints`. A query becoming active or inactive will invoke `callback`. The callback will also be invoked upon initialization. Callback will receive all of the values associated with the active media queries.\n\n### Parameters\n* **breakpoints** (object)\n  - Keys: Must be media queries excluding the leading characters `@media` as per [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) specs.\n  - Values: Consumers discretion. Strings are recommended.\n\n* **callback** (function)\n  - Parameter: `active`\n  - Invoked when a query becomes active or inactive and also when the instance is first initialized. `active` is of type Array and populated with each value (from `breakpoints`) corresponding to a matching query (from `breakpoints`).\n\n* **priority** (array)\n  - Optional argument. Mainly useful in configurations that contain competing breakpoints (multiple active at a time).\n  - Each item in this array must correspond to a value in the breakpoints object and there may be no duplicates. The precedence of each item is dependent on the array's order. The lower the array index of an item is, the higher the priority.\n\n### Returns\n* **destroy** (function)\n  - A function that will unregister the breakpoint listeners for the instance that returned it.\n  - Returns true if unregistration was successful, false for subsequent calls and failure.\n\n## Examples\n\n#### Non-competing breakpoints:\n```js\nconst breakpointObject = {\n  'screen and (max-width: 413px)': 'smallest',\n  'screen and (min-width: 414px) and (max-width: 767px)': 'small',\n  'screen and (min-width: 768px) and (max-width: 1079px)': 'medium',\n  'screen and (min-width: 1080px) and (max-width: 1399px)': 'large',\n  'screen and (min-width: 1400px)': 'largest',\n};\n\nconst callback = function(active) {\n  // use value here\n};\n\nconst destroy = respondable(map, callback);\n\n// remove registered listeners\ndestroy();\n```\n\n#### Competing breakpoints:\n```js\nconst breakpointObject = {\n  'screen and (max-width: 413px)': 'smallest',\n  'screen and (min-width: 414px)': 'small',\n  'screen and (min-width: 768px)': 'medium',\n  'screen and (min-width: 1080px)': 'large',\n  'screen and (min-width: 1400px)': 'largest',\n};\n\nconst priority = ['largest', 'large', 'medium', 'small', 'smallest'];\n\nconst callback = function(active, largest) {\n  // The second parameter will now always be the largest active query.\n}\n\nconst destroy = respondable(map, callback, priority);\n\n// remove registered listeners\ndestroy();\n```\n\n## Best practices\n\n- While respondable is performant, it is recommended to create only one instance in your app if possible.\n\n- It is recommended to leave no gaps in the `breakpoints` object. It can also be advantageous to set up `breakpoints` in a such a way that there is always a matching query. (Ex: Using breakpoints for 'too small' or 'too big' to cover all of the sizes that aren't meaningful in your application.) This pattern should be more useful than the previously available `default` key in the `breakpoints` object which was only active when there was no matching query.\n\n## Demo\n\nClone this repo and open `example/demo.html` in your browser to test it out.\n\n## Contributing\nContributions are welcome! Should you decide to contribute we ask that you:\n- Write code that our linter doesn't hate.\n- Write tests that cover any new code and update tests if changes were made to existing code. We would love it if code coverage stayed at 100%.\n","maintainers":[{"email":"Nathan.Schwartz95@gmail.com","name":"nathan-schwartz"},{"email":"bhdecker84@gmail.com","name":"brad.decker"}],"time":{"modified":"2022-06-26T11:58:11.689Z","created":"2016-02-25T21:47:25.428Z","0.0.1":"2016-02-25T21:47:25.428Z","0.1.0":"2016-02-26T15:12:40.977Z","0.1.1":"2016-02-26T16:11:29.531Z","0.1.2":"2016-02-26T18:30:28.999Z","0.1.3":"2016-02-26T19:45:18.960Z","0.1.4":"2016-05-13T22:28:26.668Z","1.0.0":"2016-11-02T20:25:51.765Z","1.0.1":"2016-12-16T22:23:26.253Z"},"keywords":["responsive","matchMedia","breakpoint","query","media","viewport"],"license":"MIT","readmeFilename":"README.md","contributors":[{"name":"Brandon Dail","email":"cottoncrypt@gmail.com"},{"name":"Nathan Schwartz","email":"nathan.schwartz95@gmail.com"}]}