react-only
Version:
🔍 <Only /> displays some contents for a specific screen size
3 lines (2 loc) • 3.77 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e=e||self)["react-only"]={},e.React)}(this,(function(e,n){function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}function t(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)n.indexOf(r=a[t])>=0||(i[r]=e[r]);return i}var i=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],a=["width","height"],o=function(e){return Object.keys(e).reduce((function(n,r){var t=e[r];if(!Array.isArray(t)||t.length<=1)return n;var o,c,u=t[0],f=t[1],l=t[2],s=t.slice(3);if(s.length>0){var p=new Error('The following fields "'+s+'" have been ignored');console.error(p)}if("number"!=typeof u||"number"!=typeof f)return n;"string"==typeof l?o=l:"object"==typeof l&&(c=l.direction,o=l.unit);var d=Math.min(u,f),v=Math.max(u,f),m=o&&i.includes(o)?o:"px",h=c&&a.includes(c)?c:"width";return n[r]=[d,v,m,h],n[r+"Up"]=[d,Infinity,m,h],n[r+"Down"]=[0,v,m,h],n}),{})},c={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(o(c)),f=function(e){var t=e.breakpoints,i=e.additionalBreakpoints,a=e.children;return n.createElement(u.Provider,{value:o(r({},void 0===t?c:t,{},void 0===i?{}:i))},a)};f.displayName="BreakpointsProvider";var l=function(e,n){void 0===n&&(n=!1);var r,t=[],i=e[0],a=e[1],o=e[2],c=e[3];return 0!==i&&(r=""+i+o,n&&(r="calc("+r+" + 1px)"),t.push("(min-"+c+":"+r+")")),Infinity!==a&&(r=""+a+o,n&&(r="calc("+r+" - 1px)"),t.push("(max-"+c+":"+r+")"))," "+t.join(" and ")},s=function(e){var r=n.useState(void 0),t=r[0],i=r[1];return n.useLayoutEffect((function(){if(e){var n=matchMedia(e);i(n.matches);var r=function(e){i(e.matches)};return n.addListener(r),function(){n.removeListener(r)}}}),[e]),t},p=function(e,r){var t=n.useContext(u),i=n.useMemo((function(){return function(e){return function(n,r){if(void 0===n&&(n=""),!n)return"";var t=n.split(" "),i=t.map((function(n){return e[n]})).filter(Boolean).map((function(e){return l(e,r)})).filter(Boolean).join(",");if(!i){var a=1===t.length;console.error('"'+t.join('", "')+'" '+(a?"is":"are")+"n't "+(a?"a ":"")+"valid breakpoint"+(a?"":"s"))}return i}}(t)}),[t]),a=n.useMemo((function(){return i(e,r)}),[i,e,r]);return s(a)};function d(e){var r=e.matchMedia,i=e.on,a=e.strict,o=e.as,c=e.children,u=t(e,["matchMedia","on","strict","as","children"]),f=p(i,a),l=s(r);return f||l?n.createElement(o||n.Fragment,o?u:void 0,c):null}d.displayName="Only";var v=function e(r){if(!r||!r.props)return r;var i=r.props.children;if(!i)return null;var a=n.Children.map(i,e),o=r.props,c=o.only,u=o.matchMedia,f=o.strict,l=t(o,["only","matchMedia","strict"]),s=n.createElement(r.type,l,a);return c||u?n.createElement(d,{on:c||"",matchMedia:u||"",strict:f},s):s},m=function(e){var r=e.children,i=e.as,a=t(e,["children","as"]),o=n.Children.map(r,v);return i?n.createElement(i,a,o):n.createElement(n.Fragment,null,o)};m.displayName="Match";var h=function(e){return function(n){var r={};return Object.keys(n).forEach((function(t){var i=e[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(e));r["@media "+l(i)]=n[t]})),r}};e.BreakpointsContext=u,e.BreakpointsProvider=f,e.Match=m,e.Only=d,e.toCSS=function(e){return function(n){return function e(n){var r="";return Object.entries(n).forEach((function(n){var t=n[0],i=n[1];r+="object"==typeof i?t+" {\n"+e(i)+"}\n":t+": "+i+";\n"})),r}(h(e)(n))}},e.toJSON=h,e.useOnly=p,e.useQuery=s}));
//# sourceMappingURL=react-only.umd.js.map