json2mq

What is json2mq?

The json2mq npm package is a utility for converting JSON objects into media query strings. This can be particularly useful when working with responsive design in JavaScript, where you might need to generate media queries dynamically based on certain conditions or configurations.

What are json2mq's main functionalities?

Convert JSON to media query string

This feature allows you to pass a JSON object representing the media query parameters and outputs a media query string. For example, the JSON object `{screen: true, minWidth: 100, maxWidth: 300}` would be converted to the string `'screen and (min-width: 100px) and (max-width: 300px)'`.

json2mq({screen: true, minWidth: 100, maxWidth: 300})

Other packages similar to json2mq

css-mediaquery

This package is used for parsing and serializing CSS media queries. It is similar to json2mq in that it deals with media queries but offers parsing capabilities in addition to serialization, which json2mq does not.

enquire.js

Although not a direct alternative to json2mq, enquire.js allows you to programmatically listen to media queries and act on them in JavaScript. It provides a higher-level API compared to json2mq, which is focused solely on converting JSON to media query strings.

matchmediaquery

This package is similar to json2mq in that it is used in the context of media queries. It is designed to evaluate whether a given media query matches the current state of the document. Unlike json2mq, it does not convert JSON to media queries but rather evaluates them.

README

json2mq

json2mq is used to generate media query string from JSON or javascript object.

Install

npm install json2mq

Usage

var json2mq = require('json2mq');
json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'

• Media type

json2mq({screen: true});  // -> 'screen'

• Media type with negation

json2mq({handheld: false});  // -> 'not handheld'

• Media features can be specified in camel case

json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'

• px is added to numeric dimension values

json2mq({minWidth: 100, maxWidth: '20em'});
// -> '(min-width: 100px) and (max-width: 20em)'

• Multiple media queries can be passed as an array

json2mq([{screen: true, minWidth: 100}, {handheld: true, orientation: 'landscape'}]); 
// -> 'screen and (min-width: 100px), handheld and (orientation: landscape)'

Contributors

• Eric Schoffstall