• Stars
    star
    167
  • Rank 226,635 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate media query string from JSON or javascript object

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

More Repositories

1

react-slick

React carousel component
JavaScript
11,292
star
2

react-highlight

React component for syntax highlighting
JavaScript
751
star
3

react-foundation-apps

Foundation Apps components built with React
JavaScript
292
star
4

react-responsive-mixin

Mixin to develop responsive react components
JavaScript
95
star
5

awesome-mobx

Awesome list mobx resources
57
star
6

generator-react-foundation-apps

Start a project with react foundation apps quickly
CSS
37
star
7

can-use-dom

Test if you can use dom in the environment
JavaScript
20
star
8

timetracker

Timetracker application built with react-native
JavaScript
17
star
9

nextjs-demo

Next.js demos
JavaScript
11
star
10

react-isomorphic-example

JavaScript
10
star
11

foundation-material

Foundation for Apps and material design
CSS
9
star
12

string-convert

Set of string conversion functions
JavaScript
7
star
13

generator-react-slick

Starter kit for react-slick
CSS
7
star
14

graphql-asia-2019-workshop

JavaScript
6
star
15

reactfoo-delhi-react-workshop

JavaScript
5
star
16

react-native-layout-examples

JavaScript
4
star
17

rescript-react-workshop

CSS
4
star
18

react-test-examples

Basic examples for testing react components
JavaScript
4
star
19

react-layer-mixin

React mixin for building Layered components
JavaScript
4
star
20

react-todomvc

JavaScript
3
star
21

graphql-apollo-chat

JavaScript
3
star
22

react-ripple

Ripple effect of material design with react
JavaScript
3
star
23

react-india-2019-graphql-workshop

JavaScript
3
star
24

react-autosize

JavaScript
2
star
25

react-hook-examples

JavaScript
2
star
26

react-ssr

React server side rendering with express and webpack
JavaScript
2
star
27

react-native-analog-clock

Simple analog clock create with react-native
JavaScript
2
star
28

react-native-navigation-demos

JavaScript
2
star
29

apollo-link-cache

JavaScript
2
star
30

graphql-asia-2020-workshop

JavaScript
2
star
31

gulp-jsxformat

prettify jsx with gulp
JavaScript
2
star
32

rescript-binding-examples

1
star
33

reason-react-swapi

Reason
1
star
34

relay-todo

JavaScript
1
star
35

dataviz-workshop-demos

JavaScript
1
star
36

graphql-relay-todo

JavaScript
1
star
37

reddit-clone

JavaScript
1
star
38

react-materialize

react port of materialize
1
star
39

react-form-examples

Example forms built with react
JavaScript
1
star
40

webpack-demo

JavaScript
1
star
41

react-beginners-workshop

JavaScript
1
star
42

apollo-mutation-issue

JavaScript
1
star
43

devday-offline-demo

JavaScript
1
star
44

react-animation-demos

JavaScript
1
star
45

gulp-sassbeautify

Beautify sass and scss with gulp
JavaScript
1
star
46

reason-react-todomvc

Reason
1
star
47

graphql-apollo-todo

Simple todo app built with GraphQL, Apollo, React
JavaScript
1
star
48

apollo-todo

JavaScript
1
star
49

todo-app

Simple todo app written in react
CSS
1
star
50

hasura-relay-todo

JavaScript
1
star
51

reactfoo-mumbai-graphql-workshop

JavaScript
1
star
52

graphql-urql-chat

JavaScript
1
star
53

ReactNativeCalculator

Simple Calculator built with react native
JavaScript
1
star
54

mq2json

Parse media query string to json
JavaScript
1
star
55

jan2017-training

JavaScript
1
star