/*! For license information please see bf7ded2c.a33be4bb.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[5300],{10089:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var s=n(85893),r=n(11151);const o={sidebar_position:7,title:"useMediaQuery",comment:!0,tags:["Reactjs","Custom Hook","useMediaQuery"]},a=void 0,i={id:"reactjs/custom-hook/use-media-query",title:"useMediaQuery",description:"",source:"@site/issues/reactjs/custom-hook/use-media-query.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-media-query",permalink:"/issues/reactjs/custom-hook/use-media-query",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-media-query.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useMediaQuery",permalink:"/issues/tags/use-media-query"}],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7,title:"useMediaQuery",comment:!0,tags:["Reactjs","Custom Hook","useMediaQuery"]},sidebar:"tutorialSidebar",previous:{title:"useCountDown",permalink:"/issues/reactjs/custom-hook/use-count-down"},next:{title:"useWindowSize",permalink:"/issues/reactjs/custom-hook/use-window-size"}},u={},c=[];function l(e){const t={code:"code",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"function debounce(func, timeout = 300) {\n  let timer;\n  return function (...args) {\n    if (timer) {\n      clearTimeout(timer);\n    }\n\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, timeout);\n  };\n}\n\nconst 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 useMediaQuery = (mediaQuery) => {\n  const [isMatch, setIsMatch] = useState(false);\n  const refDebounce = useRef();\n\n  useEffect(() => {\n    const list = window.matchMedia(mediaQuery);\n    setIsMatch(list.matches);\n  }, [mediaQuery]);\n\n  refDebounce.current = useCallback(\n    debounce((matches) => {\n      if (matches !== isMatch) setIsMatch(matches);\n    }, 500),\n    [isMatch],\n  );\n\n  useEventListener('resize', () => {\n    const list = window.matchMedia(mediaQuery);\n    refDebounce.current(list.matches);\n  });\n\n  return isMatch;\n};\n\nconst App = () => {\n  const isLarge = useMediaQuery('(min-width: 1200px)');\n\n  return <div>Large: {isLarge.toString()}</div>;\n};\n\nrender(<App />);\n"})})}function m(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},75251:(e,t,n)=>{var s=n(67294),r=Symbol.for("react.element"),o=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var s,o={},c=null,l=null;for(s in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(l=t.ref),t)a.call(t,s)&&!u.hasOwnProperty(s)&&(o[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===o[s]&&(o[s]=t[s]);return{$$typeof:r,type:e,key:c,ref:l,props:o,_owner:i.current}}t.Fragment=o,t.jsx=c,t.jsxs=c},85893:(e,t,n)=>{e.exports=n(75251)},11151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var s=n(67294);const r={},o=s.createContext(r);function a(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);