@blocz/react-responsive/lib/react-responsive.cjs

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

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c);const l=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],u=[`width`,`height`];function d(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];if(!Array.isArray(r)||r.length<=1)return t;let[i,a,o,...s]=r;if(s.length>0){let e=Error(`The following fields "${s}" have been ignored`);console.error(e)}if(typeof i!=`number`||typeof a!=`number`)return t;let c,d;typeof o==`string`?c=o:typeof o==`object`&&(d=o.direction,c=o.unit);let f=Math.min(i,a),p=Math.max(i,a),m=c&&l.includes(c)?c:`px`,h=d&&u.includes(d)?d:`width`;return t[n]=[f,p,m,h],t[`${n}Up`]=[f,1/0,m,h],t[`${n}Down`]=[0,p,m,h],t},{})}const f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=c.createContext(d(f));function m({mediaRanges:e=f,additionalMediaRanges:t,children:n}){let r=c.useMemo(()=>d({...e,...t}),[e,t]);return c.createElement(p.Provider,{value:r},n)}const h=p;function g({breakpoints:e,additionalBreakpoints:t,children:n}){return c.createElement(m,{mediaRanges:e,additionalMediaRanges:t},n)}function _(e){let t=[],[n,r,i,a]=e;return n!==0&&t.push(`(min-${a}:${n}${i})`),r!==1/0&&t.push(`(max-${a}:${r}${i})`),` ${t.join(` and `)}`}function v(e){return function(t=``){if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>_(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid media range${e?``:`s`}`)}return r}}function y(e){let t=c.useMemo(()=>matchMedia(e),[e]);return c.useSyncExternalStore(c.useCallback(e=>(t.addListener(e),()=>t.removeListener(e)),[t]),()=>t.matches,()=>t.matches)}function b(e,t){let n=c.useMemo(()=>v(e),[e]);return y(c.useMemo(()=>n(t),[n,t])||`-`)}function x(e){return b(c.useContext(p),e)}const S=x;function C({matchMedia:e,on:t,as:n,children:r,...i}){let a=x(t),o=y(e||`-`);return a||o?c.createElement(n||c.Fragment,n?i:void 0,r):null}function w(e){let t=d(e);return{useMediaRange:e=>b(t,e),Only:({matchMedia:e,on:n,children:r})=>{let i=b(t,n),a=y(e||`-`);return i||a?c.createElement(c.Fragment,null,r):null}}}exports.BreakpointsContext=h,exports.BreakpointsProvider=g,exports.DEFAULT_MEDIA_RANGES=f,exports.MediaRangesContext=p,exports.MediaRangesProvider=m,exports.Only=C,exports.createMediaRanges=w,exports.useBreakpoint=S,exports.useMediaQuery=y,exports.useMediaRange=x;
//# sourceMappingURL=react-responsive.cjs.map