From 80fddd971f9239ba885fa9892a80cd5081f7e401 Mon Sep 17 00:00:00 2001 From: Matt Thompson Date: Tue, 18 Oct 2016 14:24:00 -0400 Subject: [PATCH 1/3] Add ability to render with a function as the component child. Also make test output more useful. --- package.json | 2 +- src/index.js | 6 +++++- test/index_test.js | 20 +++++++++++++++++++- 3 files changed, 25 insertions(+), 3 deletions(-) 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 = ( + + {matches =>
} + + ); + const e = TestUtils.renderIntoDocument(mq); + assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'matched')); + }); it('renders children', function() { const mq = ( @@ -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 = ( + + {matches =>
} + + ); + const e = TestUtils.renderIntoDocument(mq); + assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'no-match')); + }); }); From b27da8658410a4a069858f9d1cd0c684f9a2df96 Mon Sep 17 00:00:00 2001 From: Matt Thompson Date: Tue, 18 Oct 2016 14:28:12 -0400 Subject: [PATCH 2/3] Update docs with new feature. --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 8a40712..79be5c6 100644 --- 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 + + {(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. From 5ce699bc02929f48da4a2cc32568d6905a0db346 Mon Sep 17 00:00:00 2001 From: Matt Thompson Date: Tue, 18 Oct 2016 16:45:10 -0400 Subject: [PATCH 3/3] Add space to readme. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 79be5c6..a8c61ce 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ var A = React.createClass({ }); ``` -###Rendering with a child function +### 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`.