@blocz/react-responsive
Version:
🔍 <Only /> displays some contents for a specific screen size
2 lines • 3.14 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@blocz/react-responsive`]={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let 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},{})}let f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=t.createContext(d(f));function m({mediaRanges:e=f,additionalMediaRanges:n,children:r}){let i=t.useMemo(()=>d({...e,...n}),[e,n]);return t.createElement(p.Provider,{value:i},r)}let h=p;function g({breakpoints:e,additionalBreakpoints:n,children:r}){return t.createElement(m,{mediaRanges:e,additionalMediaRanges:n},r)}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 n=t.useMemo(()=>matchMedia(e),[e]);return t.useSyncExternalStore(t.useCallback(e=>(n.addListener(e),()=>n.removeListener(e)),[n]),()=>n.matches,()=>n.matches)}function b(e,n){let r=t.useMemo(()=>v(e),[e]);return y(t.useMemo(()=>r(n),[r,n])||`-`)}function x(e){return b(t.useContext(p),e)}let S=x;function C({matchMedia:e,on:n,as:r,children:i,...a}){let o=x(n),s=y(e||`-`);return o||s?t.createElement(r||t.Fragment,r?a:void 0,i):null}function w(e){let n=d(e);return{useMediaRange:e=>b(n,e),Only:({matchMedia:e,on:r,children:i})=>{let a=b(n,r),o=y(e||`-`);return a||o?t.createElement(t.Fragment,null,i):null}}}e.BreakpointsContext=h,e.BreakpointsProvider=g,e.DEFAULT_MEDIA_RANGES=f,e.MediaRangesContext=p,e.MediaRangesProvider=m,e.Only=C,e.createMediaRanges=w,e.useBreakpoint=S,e.useMediaQuery=y,e.useMediaRange=x});
//# sourceMappingURL=react-responsive.umd.js.map