xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 872 B
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),d={mobile:640,tablet:1024},m=r=>r.charAt(0).toUpperCase()+r.slice(1);function h(r){const o=r??d,u=Object.keys(o),n=u.map(e=>[e,o[e]]).sort((e,s)=>e[1]-s[1]),a=n.map(([e,s],t)=>t===0?{key:e,query:`(max-width: ${s-1}px)`}:{key:e,query:`(min-width: ${n[t-1][1]}px) and (max-width: ${s-1}px)`}),y=n[n.length-1][1],c="largest";a.push({key:c,query:`(min-width: ${y}px)`});const[i,l]=p.useState(c);return p.useEffect(()=>{const e=a.map(t=>window.matchMedia(t.query)),s=()=>{for(let t=0;t<e.length;t++)if(e[t].matches){l(a[t].key);break}};return s(),e.forEach(t=>t.addEventListener("change",s)),()=>e.forEach(t=>t.removeEventListener("change",s))},[a]),{screenType:i,...Object.fromEntries(u.map(e=>[`is${m(e)}`,i===e])),isLargest:i===c}}exports.useScreenType=h;