react-responsive
Advanced tools
Comparing version 8.0.0-beta.0 to 8.0.0-beta.1
## 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 |
@@ -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 "); |
@@ -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 |
{ | ||
"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": { |
109
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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
319552
293