react-responsive - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "homepage": "http://github.com/wearefractal/react-responsive",
@@ -62,3 +62,3 @@ "repository": {
     "lint": "jshint ./src --reporter=node_modules/jshint-stylish --exclude node_modules",
-    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R dot --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
+    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R spec --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
   },
@@ -65,0 +65,0 @@ "engines": {

README.md

@@ -112,2 +112,18 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
 
+### Rendering with a child function
+
+You may also specify a function for the child of the MediaQuery component. When the component renders, it is passed whether or not the given media query matches. This function must return a single element or `null`.
+
+```jsx
+<MediaQuery minDeviceWidth={700}>
+  {(matches) => {
+    if (matches) {
+      return <div>Media query matches!</div>;
+    } else {
+      return <div>Media query does not match!</div>;
+    }
+  }}
+</MediaQuery>
+```
+
 ### Component Property
@@ -114,0 +130,0 @@

src/index.js

@@ -14,3 +14,3 @@ 'use strict';
   values: React.PropTypes.shape(mediaQuery.matchers),
-  children: React.PropTypes.array
+  children: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.function])
 };
@@ -95,2 +95,6 @@ var mediaKeys = Object.keys(mediaQuery.all);
   render: function(){
+    if(typeof this.props.children === 'function') {
+      return this.props.children(this.state.matches);
+    }
+
     if (this.state.matches === false) {
@@ -97,0 +101,0 @@ return null;

test/index_test.js

@@ -20,2 +20,11 @@ var React = require('react');
     });
+    it('renders with output of callback', function() {
+      const mq = (
+        <MediaQuery query="all">
+          {matches => <div className={matches ? 'matched': ''} />}
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'matched'));
+    });
     it('renders children', function() {
@@ -137,3 +146,12 @@ const mq = (
     assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'parentBox'));
-  })
+  });
+  it('renders with output of callback', function() {
+    const mq = (
+      <MediaQuery maxWidth={300}>
+        {matches => <div className={matches ? 'matched': 'no-match'} />}
+      </MediaQuery>
+    );
+    const e = TestUtils.renderIntoDocument(mq);
+    assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'no-match'));
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

605987

increased by0.22%

Lines of code

7670

increased by0.27%

Number of lines in readme file

266

increased by6.4%

No dependency changes