Add onChange callback

modules/Media.js

@@ -16,7 +16,8 @@ class Media extends React.Component {
     ]).isRequired,
     render: PropTypes.func,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    targetWindow: PropTypes.object
+    targetWindow: PropTypes.object,
+    onQueryStateChange: PropTypes.func
   };
 
   static defaultProps = {
@@ -43,12 +44,23 @@ class Media extends React.Component {
     if (typeof query !== "string") query = json2mq(query);
 
     this.mediaQueryList = targetWindow.matchMedia(query);
+
+    const { onQueryStateChange } = this.props;
+    if (onQueryStateChange) {
+      this.mediaQueryList.addListener(onQueryStateChange);
+    }
+
     this.mediaQueryList.addListener(this.updateMatches);
     this.updateMatches();
   }
 
   componentWillUnmount() {
     this.mediaQueryList.removeListener(this.updateMatches);
+
+    const { onQueryStateChange } = this.props;
+    if (onQueryStateChange) {
+      this.mediaQueryList.removeListener(onQueryStateChange);
+    }
   }
 
   render() {

modules/__tests__/Media-test.js

@@ -3,10 +3,14 @@ import ReactDOM from "react-dom";
 import ReactDOMServer from "react-dom/server";
 import Media from "../Media";
 
-const createMockMediaMatcher = matches => () => ({
+const createMockMediaMatcher = (
   matches,
-  addListener: () => {},
-  removeListener: () => {}
+  addListener = () => {},
+  removeListener = () => {}
+) => () => ({
+  matches,
+  addListener,
+  removeListener
 });
 
 describe("A <Media>", () => {
@@ -160,6 +164,30 @@ describe("A <Media>", () => {
     });
   });
 
+  describe("when an onQueryStateChange function is passed", () => {
+    const mockAddListener = jest.fn();
+    beforeEach(() => {
+      window.matchMedia = createMockMediaMatcher(true, mockAddListener);
+    });
+
+    afterEach(() => {
+      mockAddListener.mockClear();
+    });
+
+    it("adds the function as a listener to the media query", () => {
+      const callback = () => {};
+      const element = (
+        <Media query="" onQueryStateChange={callback}>
+          {matches => (matches ? <div>hello</div> : <div>goodbye</div>)}
+        </Media>
+      );
+
+      ReactDOM.render(element, node, () => {
+        expect(mockAddListener).toHaveBeenCalledWith(callback);
+      });
+    });
+  });
+
   describe("rendered on the server", () => {
     beforeEach(() => {
       window.matchMedia = createMockMediaMatcher(true);