Merge pull request #64 from whatknight/render-func

Pass function as children.
yocontra · Oct 18, 2016 · fb45cb6 · fb45cb6
2 parents b6364b6 + 5ce699b
commit fb45cb6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -109,6 +109,22 @@ var A = React.createClass({
 });
 ```
 
+### 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
 
 You may specify an optional `component` property on the `MediaQuery` that indicates what component to wrap children with. Any additional props defined on the `MediaQuery` will be passed through to this "wrapper" component. If the `component` property is not defined and the `MediaQuery` has more than 1 child, a `div` will be used as the "wrapper" component by default. However, if the `component` prop is not defined and there is only 1 child, that child will be rendered alone without a component wrapping it.

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'));
+  });
 });