react-responsive - npm Package Compare versions

Comparing version 8.0.0-beta.0 to 8.0.0-beta.1

CHANGELOG.md

 ## Change Log
 
+### v8.0.0
+
+- Adds Hooks API to make everything way easier (Thanks to @Tomekmularczyk)
+  - See README for more info on how to use it
+- [BREAKING] Change `values` prop to `device`
+
 ### v7.0.0
@@ -7,3 +13,3 @@
   - See README for more info on how to use it
-- Require React v16.8.0 or higher
+- [BREAKING] Require React v16.8.0 or higher
 
@@ -10,0 +16,0 @@ ### v6.1.2

dist/react-responsive.js

@@ -314,3 +314,3 @@ !function(root, factory) {
             var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__.a)(k);
-            return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? k : !1 === v ? negate(k) : "(".concat(realKey, ": ").concat(v, ")");
+            return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? realKey : !1 === v ? negate(realKey) : "(".concat(realKey, ": ").concat(v, ")");
         }, join = function(conds) {
@@ -317,0 +317,0 @@ return conds.join(" and ");

dist/react-responsive.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function r(e,t){return i(e)||a(e,t)||o()}function o(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function a(e,t){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}function i(e){if(Array.isArray(e))return e}var c=n(1),u=n.n(c),s=n(5),f=n.n(s),l=n(2),p=n(7),m=n.n(p),d=n(8),h=n(3),v=function(e){return e.query||Object(d.a)(e)},b=function(e){if(!e)return null;var t=Object.keys(e);return 0===t.length?null:t.reduce(function(t,n){return t[Object(l.a)(n)]=e[n],t},{})},y=function(){var e=u.a.useRef(!1);return u.a.useEffect(function(){e.current=!0},[]),e.current},g=function(e){var t=u.a.useContext(h.a),n=function(){return b(e)||b(t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1];return u.a.useEffect(function(){var e=n();m()(i,e)||c(e)},[e,t]),i},x=function(e){var t=function(){return v(e)},n=u.a.useState(t),o=r(n,2),a=o[0],i=o[1];return u.a.useEffect(function(){var e=t();a!==e&&i(e)},[e]),a},O=function(e,t){var n=function(){return f()(e,t||{},!!t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1],s=y();return u.a.useEffect(function(){return s&&c(n()),function(){i.dispose()}},[e,t]),i},w=function(e){var t=u.a.useState(e.matches),n=r(t,2),o=n[0],a=n[1];return u.a.useEffect(function(){var t=function(){a(e.matches)};return e.addListener(t),t(),function(){e.removeListener(t)}},[e]),o},j=function(e,t,n){var r=g(t),o=x(e);if(!o)throw new Error("Invalid or missing MediaQuery!");var a=O(o,r),i=w(a),c=y();return u.a.useEffect(function(){c&&n&&n(i)},[i]),i};t.a=j},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,r);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,n){"use strict";var r=n(1),o=n.n(r),a=o.a.createContext();t.a=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n(13),a=n(3);n.d(t,"default",function(){return o.a}),n.d(t,"useMediaQuery",function(){return r.a}),n.d(t,"Context",function(){return a.a})},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){s.matches=e.matches,s.media=e.media}function u(){f&&f.removeListener(c)}var s=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=u}function o(e,t,n){return new r(e,t,n)}var a=n(6).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,u=t[n];if(!u)return!1;switch(n){case"orientation":case"scan":return u.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),u=c(u);break;case"resolution":o=i(o),u=i(u);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),u=a(u);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,u=parseInt(u,10)||0}switch(r){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var u=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){if(e===t)return!0;if(!e||!t)return!1;var n=Object.keys(e),r=Object.keys(t),o=n.length;if(r.length!==o)return!1;for(var a=0;a<o;a++){var i=n[a];if(e[i]!==t[i])return!1}return!0}e.exports=r},function(e,t,n){"use strict";var r=n(2),o=n(9),a=function(e){return"not ".concat(e)},i=function(e,t){var n=Object(r.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?a(e):"(".concat(n,": ").concat(t,")")},c=function(e){return e.join(" and ")};t.a=function(e){var t=[];return Object.keys(o.a.all).forEach(function(n){var r=e[n];null!=r&&t.push(i(n,r))}),c(t)}},function(e,t,n){"use strict";function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=n(10),i=n.n(a),c=i.a.oneOfType([i.a.string,i.a.number]),u={orientation:i.a.oneOf(["portrait","landscape"]),scan:i.a.oneOf(["progressive","interlace"]),aspectRatio:i.a.string,deviceAspectRatio:i.a.string,height:c,deviceHeight:c,width:c,deviceWidth:c,color:i.a.bool,colorIndex:i.a.bool,monochrome:i.a.bool,resolution:c},s=r({minAspectRatio:i.a.string,maxAspectRatio:i.a.string,minDeviceAspectRatio:i.a.string,maxDeviceAspectRatio:i.a.string,minHeight:c,maxHeight:c,minDeviceHeight:c,maxDeviceHeight:c,minWidth:c,maxWidth:c,minDeviceWidth:c,maxDeviceWidth:c,minColor:i.a.number,maxColor:i.a.number,minColorIndex:i.a.number,maxColorIndex:i.a.number,minMonochrome:i.a.number,maxMonochrome:i.a.number,minResolution:c,maxResolution:c},u),f={all:i.a.bool,grid:i.a.bool,aural:i.a.bool,braille:i.a.bool,handheld:i.a.bool,print:i.a.bool,projection:i.a.bool,screen:i.a.bool,tty:i.a.bool,tv:i.a.bool,embossed:i.a.bool},l=r({},f,s);u.type=Object.keys(f),t.a={all:l,types:f,matchers:u,features:s}},function(e,t,n){e.exports=n(11)()},function(e,t,n){"use strict";function r(){}function o(){}var a=n(12);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,i){if(i!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,a=o(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function o(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function a(e){var t=e.children,n=e.device,o=e.onChange,a=r(e,["children","device","onChange"]),c=Object(i.a)(a,n,o);return"function"==typeof t?t(c):c?t:null}t.a=a;var i=n(0)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function r(e,t){return i(e)||a(e,t)||o()}function o(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function a(e,t){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}function i(e){if(Array.isArray(e))return e}var c=n(1),u=n.n(c),s=n(5),f=n.n(s),l=n(2),p=n(7),m=n.n(p),d=n(8),h=n(3),v=function(e){return e.query||Object(d.a)(e)},b=function(e){if(!e)return null;var t=Object.keys(e);return 0===t.length?null:t.reduce(function(t,n){return t[Object(l.a)(n)]=e[n],t},{})},y=function(){var e=u.a.useRef(!1);return u.a.useEffect(function(){e.current=!0},[]),e.current},g=function(e){var t=u.a.useContext(h.a),n=function(){return b(e)||b(t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1];return u.a.useEffect(function(){var e=n();m()(i,e)||c(e)},[e,t]),i},x=function(e){var t=function(){return v(e)},n=u.a.useState(t),o=r(n,2),a=o[0],i=o[1];return u.a.useEffect(function(){var e=t();a!==e&&i(e)},[e]),a},O=function(e,t){var n=function(){return f()(e,t||{},!!t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1],s=y();return u.a.useEffect(function(){return s&&c(n()),function(){i.dispose()}},[e,t]),i},w=function(e){var t=u.a.useState(e.matches),n=r(t,2),o=n[0],a=n[1];return u.a.useEffect(function(){var t=function(){a(e.matches)};return e.addListener(t),t(),function(){e.removeListener(t)}},[e]),o},j=function(e,t,n){var r=g(t),o=x(e);if(!o)throw new Error("Invalid or missing MediaQuery!");var a=O(o,r),i=w(a),c=y();return u.a.useEffect(function(){c&&n&&n(i)},[i]),i};t.a=j},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,r);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,n){"use strict";var r=n(1),o=n.n(r),a=o.a.createContext();t.a=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n(13),a=n(3);n.d(t,"default",function(){return o.a}),n.d(t,"useMediaQuery",function(){return r.a}),n.d(t,"Context",function(){return a.a})},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){s.matches=e.matches,s.media=e.media}function u(){f&&f.removeListener(c)}var s=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=u}function o(e,t,n){return new r(e,t,n)}var a=n(6).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,u=t[n];if(!u)return!1;switch(n){case"orientation":case"scan":return u.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),u=c(u);break;case"resolution":o=i(o),u=i(u);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),u=a(u);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,u=parseInt(u,10)||0}switch(r){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var u=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){if(e===t)return!0;if(!e||!t)return!1;var n=Object.keys(e),r=Object.keys(t),o=n.length;if(r.length!==o)return!1;for(var a=0;a<o;a++){var i=n[a];if(e[i]!==t[i])return!1}return!0}e.exports=r},function(e,t,n){"use strict";var r=n(2),o=n(9),a=function(e){return"not ".concat(e)},i=function(e,t){var n=Object(r.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?n:!1===t?a(n):"(".concat(n,": ").concat(t,")")},c=function(e){return e.join(" and ")};t.a=function(e){var t=[];return Object.keys(o.a.all).forEach(function(n){var r=e[n];null!=r&&t.push(i(n,r))}),c(t)}},function(e,t,n){"use strict";function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=n(10),i=n.n(a),c=i.a.oneOfType([i.a.string,i.a.number]),u={orientation:i.a.oneOf(["portrait","landscape"]),scan:i.a.oneOf(["progressive","interlace"]),aspectRatio:i.a.string,deviceAspectRatio:i.a.string,height:c,deviceHeight:c,width:c,deviceWidth:c,color:i.a.bool,colorIndex:i.a.bool,monochrome:i.a.bool,resolution:c},s=r({minAspectRatio:i.a.string,maxAspectRatio:i.a.string,minDeviceAspectRatio:i.a.string,maxDeviceAspectRatio:i.a.string,minHeight:c,maxHeight:c,minDeviceHeight:c,maxDeviceHeight:c,minWidth:c,maxWidth:c,minDeviceWidth:c,maxDeviceWidth:c,minColor:i.a.number,maxColor:i.a.number,minColorIndex:i.a.number,maxColorIndex:i.a.number,minMonochrome:i.a.number,maxMonochrome:i.a.number,minResolution:c,maxResolution:c},u),f={all:i.a.bool,grid:i.a.bool,aural:i.a.bool,braille:i.a.bool,handheld:i.a.bool,print:i.a.bool,projection:i.a.bool,screen:i.a.bool,tty:i.a.bool,tv:i.a.bool,embossed:i.a.bool},l=r({},f,s);u.type=Object.keys(f),t.a={all:l,types:f,matchers:u,features:s}},function(e,t,n){e.exports=n(11)()},function(e,t,n){"use strict";function r(){}function o(){}var a=n(12);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,i){if(i!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,a=o(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function o(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function a(e){var t=e.children,n=e.device,o=e.onChange,a=r(e,["children","device","onChange"]),c=Object(i.a)(a,n,o);return"function"==typeof t?t(c):c?t:null}t.a=a;var i=n(0)}])});
 //# sourceMappingURL=react-responsive.min.js.map

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "homepage": "http://github.com/contra/react-responsive",
@@ -6,0 +6,0 @@ "repository": {

README.md

@@ -35,5 +35,7 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
 
+This feature is available on the 8.0.0-beta branch, and will go stable very soon!
+
 ```jsx
-import React from 'react';
-import { useMediaQuery } from 'react-responsive';
+import React from 'react'
+import { useMediaQuery } from 'react-responsive'
 
@@ -43,10 +45,10 @@ const Example = () => {
     query: '(min-device-width: 1224px)'
-  });
-  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' });
-  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
+  })
+  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' })
+  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
   const isTabletOrMobileDevice = useMediaQuery({
     query: '(max-device-width: 1224px)'
-  });
-  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
-  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' });
+  })
+  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
+  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
 
@@ -56,11 +58,7 @@ return (
       <h1>Device Test!</h1>
-      {isDesktopOrLaptop && (
-        <>
-          <p>You are a desktop or laptop</p>
-          {isBigScreen && <p>You also have a huge screen</p>}
-          {isTabletOrMobile && (
-            <p>You are sized like a tablet or mobile phone though</p>
-          )}
-        </>
-      )}
+      {isDesktopOrLaptop && <>
+        <p>You are a desktop or laptop</p>
+        {isBigScreen && <p>You also have a huge screen</p>}
+        {isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p>}
+      </>}
       {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>}
@@ -70,4 +68,4 @@ <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
     </div>
-  );
-};
+  )
+}
 ```
@@ -78,3 +76,3 @@
 ```jsx
-import MediaQuery from 'react-responsive';
+import MediaQuery from 'react-responsive'
 
@@ -91,12 +89,11 @@ const Example = () => (
     <MediaQuery minResolution='2dppx'>
-      {/* it also supports render prop */}
-      {matches =>
-        matches ?
-          <p>You are retina</p>
-          :
-          <p>You are not retina</p>
+      {/* You can also use a function (render prop) as a child */}
+      {(matches) =>
+        matches
+          ? <p>You are retina</p>
+          : <p>You are not retina</p>
       }
     </MediaQuery>
   </div>
-);
+)
 ```
@@ -117,12 +114,12 @@
 ```jsx
-import React from 'react';
-import { useMediaQuery } from 'react-responsive';
+import React from 'react'
+import { useMediaQuery } from 'react-responsive'
 
 const Example = () => {
-  const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 });
-  const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 });
-  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });
-  const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 });
-  const isPortrait = useMediaQuery({ orientation: 'portrait' });
-  const isRetina = useMediaQuery({ minResolution: '2dppx' });
+  const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 })
+  const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 })
+  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
+  const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 })
+  const isPortrait = useMediaQuery({ orientation: 'portrait' })
+  const isRetina = useMediaQuery({ minResolution: '2dppx' })
 
@@ -133,4 +130,4 @@ return (
     </div>
-  );
-};
+  )
+}
 ```
@@ -156,3 +153,3 @@
 ```jsx
-import { useMediaQuery } from 'react-responsive';
+import { useMediaQuery } from 'react-responsive'
 
@@ -163,3 +160,3 @@ const Example = () => {
      { deviceWidth: 1600 } // `device` prop
-  );
+  )
 
@@ -175,3 +172,3 @@ return (
     </div>
-  );
+  )
 }
@@ -188,5 +185,5 @@ ```
 ```jsx
-import { Context as ResponsiveContext } from 'react-responsive';
-import { renderToString } from 'react-dom/server';
-import App from './App';
+import { Context as ResponsiveContext } from 'react-responsive'
+import { renderToString } from 'react-dom/server'
+import App from './App'
 
@@ -199,3 +196,3 @@ ...
     </ResponsiveContext.Provider>
-  );
+  )
 ...
@@ -207,5 +204,5 @@ ```
 ```jsx
-import { Context as ResponsiveContext } from 'react-responsive';
-import { render } from '@testing-library/react';
-import ProductsListing from './ProductsListing';
+import { Context as ResponsiveContext } from 'react-responsive'
+import { render } from '@testing-library/react'
+import ProductsListing from './ProductsListing'
 
@@ -218,4 +215,4 @@ describe('ProductsListing', () => {
       </ResponsiveContext.Provider>
-    );
-    expect(mobile).toMatchSnapshot();
+    )
+    expect(mobile).toMatchSnapshot()
 
@@ -226,6 +223,6 @@ const { container: desktop } = render(
       </ResponsiveContext.Provider>
-    );
-    expect(desktop).toMatchSnapshot();
-  });
-});
+    )
+    expect(desktop).toMatchSnapshot()
+  })
+})
 ```
@@ -240,3 +237,3 @@
 ```jsx
-import { useMediaQuery } from 'react-responsive';
+import { useMediaQuery } from 'react-responsive'
 
@@ -267,5 +264,5 @@ const Desktop = ({ children }) => {
   </div>
-);
+)
 
-export default Example;
+export default Example
 ```
@@ -272,0 +269,0 @@

No alert changes

Improved metrics

Total package byte prevSize

319552

increased by0.08%

Worsened metrics

Number of lines in readme file

293

decreased by-1.01%

No dependency changes