Add onChange callback

yocontra · Apr 21, 2017 · 2c6b00d · 2c6b00d
1 parent ab7ff5c
commit 2c6b00d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -10,7 +10,8 @@ const defaultTypes = {
   component: PropTypes.node,
   query: PropTypes.string,
   values: PropTypes.shape(mediaQuery.matchers),
-  children: PropTypes.oneOfType([ PropTypes.node, PropTypes.function ])
+  children: PropTypes.oneOfType([ PropTypes.node, PropTypes.function ]),
+  onChange: PropTypes.function
 }
 const mediaKeys = Object.keys(mediaQuery.all)
 const excludedQueryKeys = Object.keys(defaultTypes)
@@ -80,6 +81,12 @@ export default class MediaQuery extends React.Component {
       matches: this._mql.matches
     })
   }
+
+  componentDidUpdate(_, prevState) {
+   if(this.props.onChange && prevState.matches !== this.state.matches) {
+     this.props.onChange(this.state.matches);
+   }
+  }
 
   render() {
     if(typeof this.props.children === 'function') {

diff --git a/test/index_test.js b/test/index_test.js
@@ -161,4 +161,15 @@ describe('MediaQuery', function() {
     const e = TestUtils.renderIntoDocument(mq);
     assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'no-match'));
   });
+  it('calls onChange callback if provided', function() {
+    const callback = sinon.spy()
+    const mq = (
+      <MediaQuery onChange={callback} query="all">
+        <div className="childComponent"/>
+      </MediaQuery>
+    )
+    const e = TestUtils.renderIntoDocument(mq);
+    e.setState({ matches: false })
+    assert.isNotFalse(callback.calledOnce)
+  })
 });