Merge pull request #18 from blairanderson/json-to-media-query

convert json to media query #16

README.md

@@ -84,4 +84,51 @@ class App extends React.Component {
 
 The `render` prop is never called if the query does not match.
 
+query also accepts JSON(similar to jsx style) and is converted to media query via [json2mq](https://github.com/akiran/json2mq/blob/master/README.md#usage)
+
+```js
+import React from 'react'
+import Media from 'react-media'
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Media query={{maxWidth: 599}}>
+          {matches => matches ? (
+            <p>The document is less than 600px wide.</p>
+          ) : (
+            <p>The document is at least 600px wide.</p>
+          )}
+        </Media>
+      </div>
+    )
+  }
+}
+```
+
+Pixels are default type, can use em with string.
+
+
+```js
+import React from 'react'
+import Media from 'react-media'
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Media query={{minWidth: 100, maxWidth: '20em'}}>
+          {matches => matches ? (
+            <p>The document has max-width of 20em and min-width of 100px.</p>
+          ) : (
+            <p>This document does not.</p>
+          )}
+        </Media>
+      </div>
+    )
+  }
+}
+```
+
 That's it :) Enjoy!

modules/Media.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import json2mq from 'json2mq'
 
 class Media extends React.Component {
   state = {
@@ -9,8 +10,12 @@ class Media extends React.Component {
     this.setState({ matches: this.mediaQueryList.matches })
 
   componentWillMount() {
+    const { query } = this.props
+
     if (typeof window === 'object') {
-      this.mediaQueryList = window.matchMedia(this.props.query)
+      this.mediaQueryList = window.matchMedia(
+        typeof query === 'object' ? json2mq(query) : query
+      )
       this.mediaQueryList.addListener(this.updateMatches)
       this.updateMatches()
     }
@@ -36,7 +41,10 @@ class Media extends React.Component {
 
 if (__DEV__) {
   Media.propTypes = {
-    query: PropTypes.string.isRequired,
+    query: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object
+    ]).isRequired,
     render: PropTypes.func,
     children: PropTypes.oneOfType([
       PropTypes.node,

modules/__tests__/Media-test.js

@@ -56,6 +56,22 @@ describe('A <Media>', () => {
         })
       })
     })
+
+    describe('and JSON input', () => {
+      it('renders its child', () => {
+        const jsonQuery = {maxWidth: window.innerWidth}
+        const element = (
+          <Media query={jsonQuery} render={() => (
+            <div>hello</div>
+          )}/>
+        )
+
+        render(element, node, () => {
+          expect(node.firstChild.innerHTML).toMatch(/hello/)
+        })
+      })
+    })
+
   })
 
   describe('with a query that does not match', () => {
@@ -118,6 +134,22 @@ describe('A <Media>', () => {
         })
       })
     })
+
+    describe('and JSON input', () => {
+      it('does not render its child', () => {
+        const jsonQuery = {minWidth: window.innerWidth + 1}
+        const element = (
+          <Media query={jsonQuery} render={() => (
+            <div>hello</div>
+          )}/>
+        )
+
+        render(element, node, () => {
+          expect(node.firstChild.innerHTML).toNotMatch(/hello/)
+        })
+      })
+    })
+
   })
 
   describe('rendered on the server', () => {

package.json

@@ -38,6 +38,7 @@
     "expect": "^1.20.2",
     "gzip-size": "^3.0.0",
     "in-publish": "^2.0.0",
+    "json2mq": "^0.2.0",
     "karma": "^1.2.0",
     "karma-browserstack-launcher": "^1.0.1",
     "karma-chrome-launcher": "^1.0.1",