Add ability to render with a function as the component child.

Also make test output more useful.
yocontra · Oct 18, 2016 · 80fddd9 · 80fddd9
1 parent b6364b6
commit 80fddd9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
   },
   "scripts": {
     "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"
   },
   "engines": {
     "node": ">= 0.10"

diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,7 @@ var defaultTypes = {
   component: React.PropTypes.node,
   query: React.PropTypes.string,
   values: React.PropTypes.shape(mediaQuery.matchers),
-  children: React.PropTypes.array
+  children: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.function])
 };
 var mediaKeys = Object.keys(mediaQuery.all);
 var excludedQueryKeys = Object.keys(defaultTypes);
@@ -91,6 +91,10 @@ var mq = React.createClass({
   },
 
   render: function(){
+    if(typeof this.props.children === 'function') {
+      return this.props.children(this.state.matches);
+    }
+
     if (this.state.matches === false) {
       return null;
     }

diff --git a/test/index_test.js b/test/index_test.js
@@ -17,6 +17,15 @@ describe('MediaQuery', function() {
     after(function() {
       this.mmStub.restore();
     });
+    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() {
       const mq = (
         <MediaQuery query="all">
@@ -133,5 +142,14 @@ describe('MediaQuery', function() {
     );
     const e = TestUtils.renderIntoDocument(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'));
+  });
 });