UNPKG

@blocz/react-responsive

Version:

🔍 <Only /> displays some contents for a specific screen size

3 lines (2 loc) 2.84 kB
function e(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var n=/*#__PURE__*/e(require("react"));function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(null,arguments)}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],o=function(e){return Object.keys(e).reduce(function(n,r){var o=e[r];if(!Array.isArray(o)||o.length<=1)return n;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var p=new Error('The following fields "'+l+'" have been ignored');console.error(p)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),d=Math.max(c,f),m=a&&t.includes(a)?a:"px",h=u&&i.includes(u)?u:"width";return n[r]=[v,d,m,h],n[r+"Up"]=[v,Infinity,m,h],n[r+"Down"]=[0,d,m,h],n},{})},a={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(o(a)),c=function(e){var t=e.breakpoints,i=e.children;return n.createElement(u.Provider,{value:o(r({},void 0===t?a:t,e.additionalBreakpoints))},i)};c.displayName="BreakpointsProvider";var f=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(r.matches);var e=function(e){o(e.matches)};return r.addListener(e),function(){r.removeListener(e)}},[r]),i},s=function(e){var r=n.useContext(u),t=n.useMemo(function(){return function(e){return function(n){if(void 0===n&&(n=""),!n)return"";var r=n.split(" "),t=r.map(function(n){return e[n]}).filter(Boolean).map(function(e){return function(e){var n=[],r=e[0],t=e[1],i=e[2],o=e[3];return 0!==r&&n.push("(min-"+o+":"+r+i+")"),Infinity!==t&&n.push("(max-"+o+":"+t+i+")")," "+n.join(" and ")}(e)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return f(i||"-")},l=["matchMedia","on","as","children"];exports.BreakpointsContext=u,exports.BreakpointsProvider=c,exports.Only=function(e){var r=e.matchMedia,t=e.on,i=e.as,o=e.children,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(n.includes(t))continue;r[t]=e[t]}return r}(e,l),u=s(t),c=f(r||"-");return u||c?n.createElement(i||n.Fragment,i?a:void 0,o):null},exports.useBreakpoint=s,exports.useMediaQuery=f; //# sourceMappingURL=react-responsive.js.map