react-media-query-hoc - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/media-query-provider.js

@@ -89,3 +89,3 @@ 'use strict';
         // and knowing the queryName in `mediaQueryListener`
-        _this2.mediaQueryListInstanceMap.set(mediaQueryListInstance, queryName);
+        _this2.mediaQueryListInstanceMap.set(mediaQueryListInstance.media, { query: mediaQueryListInstance, queryName: queryName });
 
@@ -105,4 +105,4 @@ acc[queryName] = mediaQueryListInstance.matches;
 
-      this.mediaQueryListInstanceMap.forEach(function (_, mediaQueryList) {
-        mediaQueryList.removeListener(_this3.mediaQueryListener);
+      this.mediaQueryListInstanceMap.forEach(function (mediaQueryList) {
+        return mediaQueryList.query.removeListener(_this3.mediaQueryListener);
       });
@@ -114,5 +114,7 @@ }
       var matches = _ref.matches,
-          target = _ref.target;
+          media = _ref.media;
 
-      var queryName = this.mediaQueryListInstanceMap.get(target);
+      var _mediaQueryListInstan = this.mediaQueryListInstanceMap.get(media),
+          queryName = _mediaQueryListInstan.queryName;
+
       var newMedia = _extends({}, this.state.media, _defineProperty({}, queryName, matches));
@@ -119,0 +121,0 @@

package.json

 {
   "name": "react-media-query-hoc",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A dead simple React Higher Order Component (HOC) that uses context for matching media queries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -15,3 +15,4 @@ # react-media-query-hoc
 ## Why not use this?
-We always recommend using vanilla CSS media queries to build responsive websites, this is simpler and provides a smoother UX, also it mitigates having to guess the screen width during [server side rendering](#server-side-rendering). At Domain we needed to use this component for legacy ad tech and stat reasons and advise against it's use for general responsive website design.
+We recommend using vanilla CSS media queries to build responsive websites, this is simpler, provides a smoother UX, also it mitigates having to guess the screen width during [server side rendering](#server-side-rendering). 
+Use this library if you need to dramatically alter the page layout between media types (a good example would be if you had to render completely different components).
 
@@ -18,0 +19,0 @@ ## Install

src/media-query-provider.js

@@ -47,3 +47,3 @@ import React from 'react';
       // and knowing the queryName in `mediaQueryListener`
-      this.mediaQueryListInstanceMap.set(mediaQueryListInstance, queryName);
+      this.mediaQueryListInstanceMap.set(mediaQueryListInstance.media, { query: mediaQueryListInstance, queryName });
 
@@ -60,9 +60,8 @@ acc[queryName] = mediaQueryListInstance.matches;
   componentWillUnmount() {
-    this.mediaQueryListInstanceMap.forEach((_, mediaQueryList) => {
-      mediaQueryList.removeListener(this.mediaQueryListener);
-    });
+    this.mediaQueryListInstanceMap.forEach(mediaQueryList =>
+      mediaQueryList.query.removeListener(this.mediaQueryListener));
   }
 
-  mediaQueryListener({ matches, target }) {
-    const queryName = this.mediaQueryListInstanceMap.get(target);
+  mediaQueryListener({ matches, media }) {
+    const { queryName } = this.mediaQueryListInstanceMap.get(media);
     const newMedia = {
@@ -69,0 +68,0 @@ ...this.state.media,

test/media-query-provider.js

@@ -6,7 +6,26 @@ import React from 'react';
 import sinon from 'sinon';
-import matchMediaMock from 'match-media-mock';
+import cssMediaQuery from 'css-mediaquery';
 import MediaQueryProvider from '../src/media-query-provider';
 
+const getMatchMediaMock = (config) => {
+  const listeners = {};
+  return {
+    update: (newConfig) => Object.keys(listeners).forEach((media) => {
+      listeners[media].forEach((listener) => listener({ matches: cssMediaQuery.match(media, newConfig), media }));
+    }),
+    matchMedia: (media) => {
+      listeners[media] = [];
+      return {
+        matches: cssMediaQuery.match(media, config),
+        media,
+        addListener: (listener) => { listeners[media].push(listener); },
+        removeListener: () => {},
+      };
+    },
+  };
+};
+
 describe('<MediaQueryProvider />', () => {
   let component;
+  let matchMediaMock;
 
@@ -19,6 +38,7 @@ before(() => {
     });
+  });
 
-    const matchMediaMockInstance = matchMediaMock.create();
-    matchMediaMockInstance.setConfig({ type: 'screen', width: 1200 });
-    window.matchMedia = matchMediaMockInstance;
+  beforeEach(() => {
+    matchMediaMock = getMatchMediaMock({ type: 'screen', width: 1200 });
+    window.matchMedia = matchMediaMock.matchMedia;
   });
@@ -141,2 +161,18 @@
 
+  it('handles matchMedia listener events and updates the context', () => {
+    const testComponent = mount(
+      <MediaQueryProvider>
+        <p>Test123</p>
+      </MediaQueryProvider>,
+    );
+
+    const { media: mediaBefore } = testComponent.instance().getChildContext();
+    matchMediaMock.update({ type: 'screen', width: 600 });
+    const { media: mediaAfter } = testComponent.instance().getChildContext();
+
+    expect(mediaBefore).to.eql({ desktop: true, largeDesktop: false, mobile: false, tablet: false });
+    expect(mediaAfter).to.eql({ desktop: false, largeDesktop: false, mobile: true, tablet: false });
+  });
+
+
   describe('constructor state initialisation', () => {
@@ -143,0 +179,0 @@ it('uses `cssMediaQuery` to query when values is provided', () => {

No alert changes

Improved metrics

Total package byte prevSize

535267

increased by0.2%

Lines of code

771

increased by4.19%

Number of lines in readme file

162

increased by0.62%

No dependency changes