+ {(matches) => {
+ if (matches) {
+ return Media query matches!
;
+ } else {
+ return Media query does not match!
;
+ }
+ }}
+
+```
+
### 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
index c29f723..8a68ee1 100644
--- 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
index fb538a9..3392d17 100644
--- 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
index dadadee..ae67f11 100644
--- 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 = (
+