{"id":14549,"library":"enquire.js","title":"Awesome Media Queries in JavaScript","description":"enquire.js is a lightweight, pure JavaScript library designed to programmatically respond to CSS media queries, enabling JavaScript logic to execute when media query conditions are met or unmet. It provides a clean API for registering handlers with `match`, `unmatch`, `setup`, and `destroy` callbacks, allowing developers to manage dynamic content or behavior based on responsive breakpoints. The library, currently at version 2.1.6, has no direct runtime dependencies, though it relies on the browser's native `window.matchMedia` API and would require a polyfill for environments that do not support it. Its primary differentiator was its small footprint and pure JavaScript approach without external dependencies, offering a robust solution for enhancing responsive web design beyond CSS alone. The project appears to be unmaintained, with its last significant update approximately nine years ago, indicating an abandoned status.","status":"abandoned","version":"2.1.6","language":"javascript","source_language":"en","source_url":"git://github.com/WickyNilliams/enquire.js","tags":["javascript","media query","media queries","matchMedia","enquire","enquire.js"],"install":[{"cmd":"npm install enquire.js","lang":"bash","label":"npm"},{"cmd":"yarn add enquire.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add enquire.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"enquire.js primarily operates by exposing a global `enquire` object. For modern ES Modules, it's typically imported for its side effects, and then the global `window.enquire` is accessed. Direct named or default imports are not supported.","wrong":"import { enquire } from 'enquire.js'","symbol":"enquire","correct":"import 'enquire.js';\n// then access window.enquire"},{"note":"In CommonJS environments, `require('enquire.js')` will execute the script, which then populates the global `enquire` object. The returned value of `require` itself might be the global object in some environments, but the intended usage is via the global scope.","wrong":"const { enquire } = require('enquire.js');","symbol":"enquire","correct":"const enquire = require('enquire.js');"},{"note":"This is the original and most straightforward method of using enquire.js, directly including it via a script tag which makes `enquire` available globally.","wrong":null,"symbol":"Global Access","correct":"<script src=\"path/to/enquire.min.js\"></script>\n<script>\n  enquire.register(...);\n</script>"}],"quickstart":{"code":"import 'enquire.js';\n\n// Ensure enquire is available globally after import\nif (typeof window !== 'undefined' && window.enquire) {\n  window.enquire.register(\"screen and (max-width:1000px)\", {\n\n      match : function() {\n          console.log(\"Media query (max-width:1000px) matched!\");\n          // Add your logic here when the query matches\n      },\n\n      unmatch : function() {\n          console.log(\"Media query (max-width:1000px) unmatched!\");\n          // Add your logic here when the query unmatches\n      },\n\n      setup : function() {\n          console.log(\"Handler setup once upon registration.\");\n      },\n\n      destroy : function() {\n          console.log(\"Handler destroyed and cleaned up.\");\n      },\n\n      deferSetup : false\n  });\n\n  // Example of unregistering after some time (optional cleanup)\n  // const myHandler = { /* ... */ };\n  // window.enquire.register(\"query\", myHandler);\n  // setTimeout(() => {\n  //   window.enquire.unregister(\"query\", myHandler);\n  // }, 5000);\n} else {\n  console.warn(\"enquire.js global object not found. Ensure it's correctly loaded.\");\n}","lang":"javascript","description":"Demonstrates how to register a media query handler using the global `enquire` object, reacting to viewport width changes with `match` and `unmatch` callbacks."},"warnings":[{"fix":"Include a `matchMedia` polyfill, such as 'matchmedia-polyfill' or 'media-match', before loading enquire.js. Example: `<script src=\"path/to/matchMedia.polyfill.js\"></script>`.","message":"enquire.js relies on the global `window.matchMedia` API. For older browsers (e.g., IE9 and below) or environments without `matchMedia`, a polyfill is required for the library to function correctly.","severity":"breaking","affected_versions":"All versions"},{"fix":"Ensure `enquire` is not used by other global scripts. In modern projects, consider wrapping its usage in an IIFE or scope to minimize global exposure, or migrate to a more actively maintained media query utility.","message":"The library heavily relies on exposing a global `enquire` object. This can lead to conflicts if other scripts or libraries define a global variable with the same name. It is not designed for modern modular JavaScript environments where global pollution is typically avoided.","severity":"gotcha","affected_versions":"All versions"},{"fix":"For new projects, consider modern alternatives like `window.matchMedia` directly, CSS container queries, or actively maintained libraries that provide similar functionality and better compatibility with contemporary web development practices.","message":"The enquire.js project appears to be abandoned. The last commit on its GitHub repository was 9 years ago, and there have been no new releases since version 2.1.6. This means it will not receive updates, bug fixes, or security patches, and may not be compatible with newer browser features or JavaScript standards.","severity":"deprecated","affected_versions":">=2.1.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `enquire.js` is loaded via a `<script>` tag before your dependent script, or if using a module bundler, ensure the import statement is correctly placed and the global `enquire` object is accessible (e.g., `import 'enquire.js'; window.enquire.register(...)`).","cause":"The `enquire` object was not correctly loaded or is not available in the global scope when the code attempts to use it.","error":"Uncaught ReferenceError: enquire is not defined"},{"fix":"You need to include a `matchMedia` polyfill for older browsers. Add a script tag linking to a polyfill (e.g., `matchmedia-polyfill`) before loading `enquire.js`.","cause":"The browser environment does not natively support the `window.matchMedia` API, which `enquire.js` depends on.","error":"TypeError: window.matchMedia is not a function"}],"ecosystem":"npm"}