enquire.js is a lightweight, pure JavaScript library with no dependencies for programmatically responding to CSS media queries. It provides a simple API centered around the register() method that allows developers to define handlers for CSS media query states, supporting match/unmatch callbacks, setup/destroy lifecycle methods, and deferred setup options.
npm install enquire.js// CommonJS (primary)
const enquire = require('enquire.js');
// ES Module (if supported by bundler)
import enquire from 'enquire.js';
// Browser global (from CDN)
// enquire is available as a global variableconst enquire = require('enquire.js');
// Register a handler for a media query
enquire.register("screen and (max-width: 1000px)", {
match: function() {
// Triggered when media query matches
console.log('Mobile view activated');
},
unmatch: function() {
// Triggered when media query no longer matches
console.log('Desktop view activated');
},
setup: function() {
// One-time setup when handler is registered
console.log('Handler initialized');
}
});
// Simple function handler
enquire.register("screen and (min-width: 1200px)", function() {
console.log('Large screen detected');
});enquire.js is built around several key components:
The library uses a singleton pattern where the main export is a pre-instantiated MediaQueryDispatch object.
Primary API for registering media query handlers with various handler formats and lifecycle callbacks.
/**
* Registers handlers for a given media query
* @param {string} query - CSS media query string
* @param {object|function|array} handler - Handler object, function, or array of handlers
* @param {boolean} [shouldDegrade=false] - Whether query should always run on incapable browsers
* @returns {object} enquire instance for method chaining
*/
enquire.register(query, handler, shouldDegrade);Method Chaining: All registration methods return the enquire instance, allowing for fluent method chaining:
enquire
.register("screen and (max-width: 768px)", mobileHandler)
.register("screen and (min-width: 769px)", desktopHandler)
.unregister("screen and (max-width: 480px)");API for removing media query handlers and cleaning up resources.
/**
* Unregisters query handlers
* @param {string} query - CSS media query string to target
* @param {object|function} [handler] - Specific handler to remove (optional)
* @returns {object} enquire instance for method chaining
*/
enquire.unregister(query, handler);/**
* Handler object interface
*/
interface Handler {
/** Callback fired when query transitions from unmatched to matched */
match?: function();
/** Callback fired when query transitions from matched to unmatched */
unmatch?: function();
/** One-time callback triggered on registration or first match */
setup?: function();
/** Callback for cleanup when handler is unregistered */
destroy?: function();
/** Whether to defer setup until first match (default: false) */
deferSetup?: boolean;
}'matchMedia not present, legacy browsers require a polyfill' if window.matchMedia is not availablewindow.matchMedia('only all').matches