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

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

import*as e from"react";const t=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],n=[`width`,`height`];function r(e){return Object.keys(e).reduce((r,i)=>{let a=e[i];if(!Array.isArray(a)||a.length<=1)return r;let[o,s,c,...l]=a;if(l.length>0){let e=Error(`The following fields "${l}" have been ignored`);console.error(e)}if(typeof o!=`number`||typeof s!=`number`)return r;let u,d;typeof c==`string`?u=c:typeof c==`object`&&(d=c.direction,u=c.unit);let f=Math.min(o,s),p=Math.max(o,s),m=u&&t.includes(u)?u:`px`,h=d&&n.includes(d)?d:`width`;return r[i]=[f,p,m,h],r[`${i}Up`]=[f,1/0,m,h],r[`${i}Down`]=[0,p,m,h],r},{})}const i={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},a=e.createContext(r(i));function o({mediaRanges:t=i,additionalMediaRanges:n,children:o}){let s=e.useMemo(()=>r({...t,...n}),[t,n]);return e.createElement(a.Provider,{value:s},o)}const s=a;function c({breakpoints:t,additionalBreakpoints:n,children:r}){return e.createElement(o,{mediaRanges:t,additionalMediaRanges:n},r)}function l(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 u(e){return function(t=``){if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>l(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 d(t){let n=e.useMemo(()=>matchMedia(t),[t]);return e.useSyncExternalStore(e.useCallback(e=>(n.addListener(e),()=>n.removeListener(e)),[n]),()=>n.matches,()=>n.matches)}function f(t,n){let r=e.useMemo(()=>u(t),[t]);return d(e.useMemo(()=>r(n),[r,n])||`-`)}function p(t){return f(e.useContext(a),t)}const m=p;function h({matchMedia:t,on:n,as:r,children:i,...a}){let o=p(n),s=d(t||`-`);return o||s?e.createElement(r||e.Fragment,r?a:void 0,i):null}function g(t){let n=r(t);return{useMediaRange:e=>f(n,e),Only:({matchMedia:t,on:r,children:i})=>{let a=f(n,r),o=d(t||`-`);return a||o?e.createElement(e.Fragment,null,i):null}}}export{s as BreakpointsContext,c as BreakpointsProvider,i as DEFAULT_MEDIA_RANGES,a as MediaRangesContext,o as MediaRangesProvider,h as Only,g as createMediaRanges,m as useBreakpoint,d as useMediaQuery,p as useMediaRange};
//# sourceMappingURL=react-responsive.mjs.map