Awesome Media Queries in JavaScript

2.1.6 · abandoned · verified Sun Apr 19

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.

Common errors

```
Uncaught ReferenceError: enquire is not defined
```
cause The `enquire` object was not correctly loaded or is not available in the global scope when the code attempts to use it.

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(...)`).
```
TypeError: window.matchMedia is not a function
```
cause The browser environment does not natively support the `window.matchMedia` API, which `enquire.js` depends on.

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`.

Warnings

breaking 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.
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>`.
gotcha 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.
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.
deprecated 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.
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.

Install

npm install enquire.js npm
yarn add enquire.js yarn
pnpm add enquire.js pnpm

Imports

enquire
wrong:
```
import { enquire } from 'enquire.js'
```
correct:
```
import 'enquire.js';
// then access window.enquire
```
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.
enquire
wrong:
```
const { enquire } = require('enquire.js');
```
correct:
```
const enquire = require('enquire.js');
```
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.
Global Access
```
<script src="path/to/enquire.min.js"></script>
<script>
  enquire.register(...);
</script>
```
This is the original and most straightforward method of using enquire.js, directly including it via a script tag which makes `enquire` available globally.

Quickstart

Demonstrates how to register a media query handler using the global `enquire` object, reacting to viewport width changes with `match` and `unmatch` callbacks.

import 'enquire.js';

// Ensure enquire is available globally after import
if (typeof window !== 'undefined' && window.enquire) {
  window.enquire.register("screen and (max-width:1000px)", {

      match : function() {
          console.log("Media query (max-width:1000px) matched!");
          // Add your logic here when the query matches
      },

      unmatch : function() {
          console.log("Media query (max-width:1000px) unmatched!");
          // Add your logic here when the query unmatches
      },

      setup : function() {
          console.log("Handler setup once upon registration.");
      },

      destroy : function() {
          console.log("Handler destroyed and cleaned up.");
      },

      deferSetup : false
  });

  // Example of unregistering after some time (optional cleanup)
  // const myHandler = { /* ... */ };
  // window.enquire.register("query", myHandler);
  // setTimeout(() => {
  //   window.enquire.unregister("query", myHandler);
  // }, 5000);
} else {
  console.warn("enquire.js global object not found. Ensure it's correctly loaded.");
}

view raw JSON →