@react-hook/media-query
Version:
React hooks that update when media queries change between matched and unmatched states.
3 lines (2 loc) • 1.94 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).UseMediaQuery={},e.React)}(this,(function(e,t){"use strict";function r(e,t){return e.matches[t]=0,e.mediaQueries[t]={},e}function n(e){var t=Object.keys(e);return"undefined"==typeof window?t.reduce(r,{mediaQueries:{},matches:{}}):t.reduce((function(t,r){var n=window.matchMedia(e[r]);return t.mediaQueries[r]=n,t.matches[r]=n.matches,t}),{mediaQueries:{},matches:{}})}function u(e,t){switch(t.type){case"updateMatches":return{matches:Object.keys(e.mediaQueries).reduce((function(t,r){return t[r]=e.mediaQueries[r].matches,t}),{}),mediaQueries:e.mediaQueries};case"setQueries":return n(t.queries)}}function i(e){function r(){return o({type:"updateMatches"})}function i(e){var t=r;return void 0!==e.addListener?e.addListener(t):e.addEventListener("change",t),t}var s=t.useRef(e),c=t.useReducer(u,e,n),a=c[0],o=c[1];t.useEffect((function(){(function(e,t){if(t===e)return 0;var r=Object.values(t),n=Object.values(e);if(r.length!==n.length)return 1;if(r.some((function(e,t){return e!==n[t]})))return 1;var u=Object.keys(e);return Object.keys(t).some((function(e,t){return e!==u[t]}))})(e,s.current)&&(o({type:"setQueries",queries:e}),s.current=e)}),[e]),t.useEffect((function(){function e(e,t){void 0!==e.addListener?e.removeListener(r[t]):e.removeEventListener("change",r[t])}var t=Object.values(a.mediaQueries),r=t.map(i);return function(){t.forEach(e)}}),[a.mediaQueries]);var d=a.matches,f=t.useMemo((function(){return Object.values(d)}),[d]);return{matches:d,matchesAny:f.some(Boolean),matchesAll:f.length>0&&f.every(Boolean)}}var s={};e.useMediaQueries=i,e.useMediaQuery=function(e){return i(function(e){return void 0===s[e]&&(s[e]={default:e}),s[e]}(e)).matchesAll},Object.defineProperty(e,"__esModule",{value:1})}));
//# sourceMappingURL=use-media-query.js.map