/*! For license information please see 0349af04.da1d7125.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[6459],{85587:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var s=t(85893),o=t(11151);const i={sidebar_position:8,title:"useWindowSize",comment:!0,tags:["Reactjs","Custom Hook","useWindowSize"]},r=void 0,a={id:"reactjs/custom-hook/use-window-size",title:"useWindowSize",description:"",source:"@site/issues/reactjs/custom-hook/use-window-size.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-window-size",permalink:"/issues/reactjs/custom-hook/use-window-size",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-window-size.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useWindowSize",permalink:"/issues/tags/use-window-size"}],version:"current",sidebarPosition:8,frontMatter:{sidebar_position:8,title:"useWindowSize",comment:!0,tags:["Reactjs","Custom Hook","useWindowSize"]},sidebar:"tutorialSidebar",previous:{title:"useMediaQuery",permalink:"/issues/reactjs/custom-hook/use-media-query"},next:{title:"useSize",permalink:"/issues/reactjs/custom-hook/use-size"}},c={},u=[];function l(e){const n={code:"code",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useEventListener = (eventType, callback, element = window) => {\n  const refCallback = useRef(callback);\n\n  useEffect(() => {\n    refCallback.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    const handler = (e) => refCallback.current(e);\n    element.addEventListener(eventType, handler);\n    return () => element.removeEventListener(eventType, handler);\n  }, [eventType, element]);\n};\n\nconst useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  });\n\n  useEventListener('resize', () => {\n    setWindowSize({ width: window.innerWidth, height: window.innerHeight });\n  });\n\n  return windowSize;\n};\n\nconst App = () => {\n  const { width, height } = useWindowSize();\n\n  return (\n    <h4>\n      Width: {width} - Height: {height}\n    </h4>\n  );\n};\n\nrender(<App />);\n"})})}function d(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},75251:(e,n,t)=>{var s=t(67294),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,a=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function u(e,n,t){var s,i={},u=null,l=null;for(s in void 0!==t&&(u=""+t),void 0!==n.key&&(u=""+n.key),void 0!==n.ref&&(l=n.ref),n)r.call(n,s)&&!c.hasOwnProperty(s)&&(i[s]=n[s]);if(e&&e.defaultProps)for(s in n=e.defaultProps)void 0===i[s]&&(i[s]=n[s]);return{$$typeof:o,type:e,key:u,ref:l,props:i,_owner:a.current}}n.Fragment=i,n.jsx=u,n.jsxs=u},85893:(e,n,t)=>{e.exports=t(75251)},11151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var s=t(67294);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);