react-only/lib/react-only.js

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

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