{"library":"match-media-mock","title":"Server-side MatchMedia Mock","description":"match-media-mock provides a server-side compatible substitution for the browser's `Window.matchMedia()` API. It allows developers to simulate media queries in non-browser environments, such as Node.js, making it useful for server-side rendering (SSR) of applications that rely on responsive styles or conditional rendering based on media features. The package, currently at version 0.1.1, appears to be unmaintained with its last significant update approximately 8 years ago. Its core functionality is built upon the `css-mediaquery` library for parsing and evaluating media query strings. It was specifically designed for integration with styling libraries like Radium to enable isomorphic React applications to correctly apply styles based on simulated viewport dimensions during server rendering. Due to its age, it lacks modern features and might not be compatible with contemporary module systems (ESM) or testing frameworks without additional shims, and more active alternatives now exist.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install match-media-mock"],"cli":null},"imports":["const matchMediaMock = require('match-media-mock').create();","const matchMediaMock = require('match-media-mock').create();\nmatchMediaMock.setConfig({ type: 'screen', width: 1200 });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const matchMediaMock = require('match-media-mock').create();\n\n// Configure the mock environment\nmatchMediaMock.setConfig({ type: 'screen', width: 1200 });\n\n// Test media queries\nconsole.log(\"Is (max-width: 991px) matching?\", matchMediaMock('(max-width: 991px)').matches); // Expected: false\nconsole.log(\"Is (max-width: 1240px) matching?\", matchMediaMock('(max-width: 1240px)').matches); // Expected: true\n\n// Interact with a MediaQueryList object\nconst mediaQuery = '(min-height: 800px)';\nconst mediaQueryList = matchMediaMock(mediaQuery);\n\nconst listener = (event) => {\n  console.log(`Media query '${mediaQuery}' changed. Matches: ${event.matches}`);\n};\n\nmediaQueryList.addListener(listener);\n\n// Simulate a change in environment and trigger listeners\nmatchMediaMock.setConfig({ type: 'screen', width: 1200, height: 900 });\nmediaQueryList.callListeners(); // Manually trigger listeners after config change\n\n// Remove the listener\nmediaQueryList.removeListener(listener);","lang":"javascript","description":"This example demonstrates how to create and configure a `match-media-mock` instance, evaluate media queries against the configured environment, and manage event listeners for media query changes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}