{"library":"matchmediaquery","title":"matchmediaquery","description":"matchmediaquery is an open-source JavaScript library providing isomorphic media query functionality, allowing developers to check CSS media queries both in browser environments and server-side contexts. Originally forked from the `matchmedia` project due to its maintainer's publishing delays, this library aimed to provide an active alternative. However, its last stable version (0.4.2) was published in late 2015, and the project has seen no significant updates or maintenance since. As a result, it is considered abandoned and may not be suitable for modern web development, lacking support for contemporary JavaScript module systems (ESM), TypeScript definitions, or up-to-date media query specifications. Its primary differentiator was its isomorphic capability, which is now often handled by more modern, actively maintained libraries or frameworks.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install matchmediaquery"],"cli":null},"imports":["const matchMediaQuery = require('matchmediaquery');","const matchMediaQuery = require('matchmediaquery');","/// <reference types=\"matchmediaquery\" />"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const matchMediaQuery = require('matchmediaquery');\n\n// Example 1: Basic media query check (client-side/browser context)\n// In a browser, this will use window.matchMedia. On the server,\n// it simulates based on provided or default properties.\nconst isSmallScreen = matchMediaQuery('(max-width: 600px)');\nconsole.log(`Is small screen (browser context): ${isSmallScreen}`);\n\n// Example 2: Server-side simulation with specific viewport properties\n// This allows you to test media queries on the server without a DOM.\nconst simulateMobile = matchMediaQuery('(min-width: 320px) and (max-width: 768px)', {\n  type: 'screen',\n  width: 375, // Simulate iPhone width\n  height: 667,\n  devicePixelRatio: 2\n});\nconsole.log(`Is mobile (server simulated): ${simulateMobile}`);\n\n// Example 3: Another server-side check for a larger desktop screen\nconst simulateDesktop = matchMediaQuery('(min-width: 1024px)', {\n  type: 'screen',\n  width: 1280,\n  height: 800,\n  devicePixelRatio: 1\n});\nconsole.log(`Is desktop (server simulated): ${simulateDesktop}`);","lang":"javascript","description":"Demonstrates how to import and use `matchmediaquery` to evaluate media queries, including server-side simulation of viewport properties.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}