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

Comparing version 0.3.5 to 0.4.0

dist/with-media.js

@@ -25,2 +25,4 @@ 'use strict';
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -49,4 +51,9 @@
       value: function render() {
-        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, this.state, {
-          media: this.context.media
+        var _props = this.props,
+            wrappedRef = _props.wrappedRef,
+            otherProps = _objectWithoutProperties(_props, ['wrappedRef']);
+
+        return _react2.default.createElement(WrappedComponent, _extends({}, otherProps, this.state, {
+          media: this.context.media,
+          ref: wrappedRef
         }));
@@ -63,2 +70,10 @@ }
 
+  MediaQueryWrapper.propTypes = {
+    wrappedRef: _propTypes2.default.func
+  };
+
+  MediaQueryWrapper.defaultProps = {
+    wrappedRef: function wrappedRef() {}
+  };
+
   MediaQueryWrapper.displayName = 'MediaQuery(' + getDisplayName(WrappedComponent) + ')';
@@ -65,0 +80,0 @@ return (0, _hoistNonReactStatics2.default)(MediaQueryWrapper, WrappedComponent);

package.json

 {
   "name": "react-media-query-hoc",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "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

@@ -98,2 +98,4 @@ # react-media-query-hoc
 
+Components wrapped by `withMedia()` won't work with React's usual `ref` mechanism, because the ref supplied will be for `withMedia` rather than the wrapped component. Therefore a prop, `wrappedRef` provides the same function.
+
 ### Server Side Rendering
@@ -100,0 +102,0 @@

src/with-media.js

@@ -12,7 +12,9 @@ import PropTypes from 'prop-types';
     render() {
+      const { wrappedRef, ...otherProps } = this.props;
       return (
         <WrappedComponent
-          {...this.props}
+          {...otherProps}
           {...this.state}
           media={this.context.media}
+          ref={wrappedRef}
         />
@@ -27,2 +29,10 @@ );
 
+  MediaQueryWrapper.propTypes = {
+    wrappedRef: PropTypes.func,
+  };
+
+  MediaQueryWrapper.defaultProps = {
+    wrappedRef: () => {},
+  };
+
   MediaQueryWrapper.displayName = `MediaQuery(${getDisplayName(WrappedComponent)})`;
@@ -29,0 +39,0 @@ return hoistNonReactStatics(MediaQueryWrapper, WrappedComponent);

test/with-media.js

@@ -44,2 +44,8 @@ /* eslint-disable */
   });
+
+  it('should provide a ref for the wrapped component', () => {
+    let receivedRef = false;
+    component = mount(<TestComponentWithMedia wrappedRef={(ref) => { receivedRef = true; }}/>, testContext);
+    expect(receivedRef).to.not.equal(false);
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

148537

increased by0.86%

Lines of code

502

increased by5.02%

Number of lines in readme file

144

increased by1.41%

No dependency changes