use-screen-size
Version:
A React hook to get the current screen size and breakpoint or write conditional code based on screen size
2 lines (1 loc) • 1.06 kB
JavaScript
(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t.useScreenSize={},t.React))})(this,function(t,s){"use strict";const n={xs:"xs",s:"s",m:"m",l:"l",xl:"xl"},o={xs:576,s:768,m:992,l:1200,xl:1/0},m=(i=o,d=250)=>{const u=typeof window<"u"&&window!==null,f=s.useCallback(()=>{const e=u?window.innerWidth:0,l=u?window.innerHeight:0;let r=n.xl;return e<i.xs?r=n.xs:e<i.s?r=n.s:e<i.m?r=n.m:e<i.l&&(r=n.l),{width:e,height:l,screen:r}},[u,i]),[c,S]=s.useState(f);s.useEffect(()=>{if(!u)return;let e;function l(){clearTimeout(e),e=setTimeout(()=>{S(f())},d)}return window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l),clearTimeout(e)}},[u,f,d]);const w=s.useMemo(()=>{const{width:e}=c;return e<i.xs?n.xs:e<i.s?n.s:e<i.m?n.m:e<i.l?n.l:n.xl},[c,i]);return{...c,screen:w}};t.BreakPoint=n,t.DEFAULT_BREAKPOINTS=o,t.useScreenSize=m,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});