From 8a7859254e4a86b2608b8fdd52794dea68c61bcc Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Tue, 30 Apr 2024 15:18:13 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20modern-a?= =?UTF-8?q?gile-team/modern-kit@e50924df822a23378c3de16d591b579f572ab257?= =?UTF-8?q?=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 4 +-- assets/js/11738f66.6cc0b5df.js | 1 + assets/js/11738f66.ef02aaa8.js | 1 - assets/js/3209f55a.a6845fb4.js | 1 - assets/js/3209f55a.fd32b4b3.js | 1 + assets/js/47a95eb2.589c62f2.js | 1 - assets/js/47a95eb2.b302f05f.js | 1 + assets/js/54102c04.10875f16.js | 1 + assets/js/54102c04.ca829d2e.js | 1 - assets/js/61a35b61.9c1f2eea.js | 1 - assets/js/61a35b61.ae6b4d49.js | 1 + assets/js/67c089fb.1e156fa1.js | 1 - assets/js/67c089fb.db548f8d.js | 1 + assets/js/935f2afb.4777aa80.js | 1 - assets/js/935f2afb.76166b0b.js | 1 + assets/js/9be130a4.244eaa74.js | 1 + assets/js/9be130a4.8267ca4b.js | 1 - assets/js/b35b1276.3a974048.js | 1 + assets/js/b35b1276.932bab46.js | 1 - assets/js/b3bf5b56.8c9a23f2.js | 1 + assets/js/b3bf5b56.d46aa213.js | 1 - assets/js/bf0dbc92.62a32d49.js | 1 + assets/js/bf0dbc92.c1529891.js | 1 - assets/js/db388e02.a60f06c5.js | 1 + assets/js/main.ce506dad.js | 2 ++ ...CENSE.txt => main.ce506dad.js.LICENSE.txt} | 0 assets/js/main.e4a2413b.js | 2 -- assets/js/runtime~main.21487a8a.js | 1 - assets/js/runtime~main.21a7932b.js | 1 + docs/introduce/index.html | Bin 16182 -> 16182 bytes .../components/DebounceWrapper/index.html | 4 +-- docs/react/components/InView/index.html | 4 +-- docs/react/components/LazyImage/index.html | 4 +-- docs/react/components/Portal/index.html | 4 +-- docs/react/components/When/index.html | 4 +-- .../useAsyncPreservedCallback/index.html | 8 +++--- .../useBlockPromiseMultipleClick/index.html | 24 ++++++++++++++++++ docs/react/hooks/useDebounce/index.html | 8 +++--- docs/react/hooks/useForceUpdate/index.html | 6 ++--- docs/react/hooks/useImageStatus/index.html | 6 ++--- .../hooks/useIntersectionObserver/index.html | 6 ++--- docs/react/hooks/useInterval/index.html | 6 ++--- docs/react/hooks/useIsMounted/index.html | 6 ++--- .../useIsomorphicLayoutEffect/index.html | 6 ++--- docs/react/hooks/useMediaQuery/index.html | 6 ++--- docs/react/hooks/useMergeRefs/index.html | 6 ++--- docs/react/hooks/useOnClickOutside/index.html | 6 ++--- .../hooks/usePreservedCallback/index.html | 6 ++--- docs/react/hooks/usePreservedState/index.html | 6 ++--- docs/react/hooks/usePrevious/index.html | 6 ++--- docs/react/hooks/useResizeObserver/index.html | 6 ++--- docs/react/hooks/useTimeout/index.html | 6 ++--- docs/react/hooks/useToggle/index.html | 6 ++--- docs/react/hooks/useUnmount/index.html | 6 ++--- .../hooks/useVisibilityChange/index.html | 6 ++--- docs/react/hooks/useWindowScrollTo/index.html | 6 ++--- docs/react/hooks/useWindowSize/index.html | 6 ++--- docs/utils/common/abRandom/index.html | 4 +-- docs/utils/common/asyncNoop/index.html | 4 +-- docs/utils/common/deepCopy/index.html | 4 +-- docs/utils/common/deepEqual/index.html | 4 +-- docs/utils/common/getUniqId/index.html | 4 +-- docs/utils/common/getUniqTime/index.html | 4 +-- docs/utils/common/getViewportSize/index.html | 4 +-- docs/utils/common/hexToRgba/index.html | 4 +-- docs/utils/common/noop/index.html | 4 +-- docs/utils/common/wrapInArray/index.html | 4 +-- docs/utils/device/getOS/index.html | 4 +-- docs/utils/device/isClient/index.html | 4 +-- docs/utils/device/isMobile/index.html | 4 +-- docs/utils/device/isSever/index.html | 4 +-- .../object/deleteEmptyProperties/index.html | 4 +-- docs/utils/object/mergeProperties/index.html | 4 +-- docs/utils/object/objectEntries/index.html | 4 +-- docs/utils/object/objectKeys/index.html | 4 +-- docs/utils/object/objectValues/index.html | 4 +-- docs/utils/object/omit/index.html | 4 +-- docs/utils/object/pick/index.html | 4 +-- .../countSubstringOccurrences/index.html | 4 +-- docs/utils/string/extractNumber/index.html | 4 +-- .../string/formatNumberWithCommas/index.html | 4 +-- .../utils/string/formatPhoneNumber/index.html | 4 +-- .../string/removeSpecialCharacters/index.html | 4 +-- docs/utils/string/repeatCharacters/index.html | 4 +-- docs/utils/validator/hasProperty/index.html | 4 +-- docs/utils/validator/isFuntion/index.html | 4 +-- docs/utils/validator/isNotNullish/index.html | 4 +-- docs/utils/validator/isNullish/index.html | 4 +-- docs/utils/validator/isNumber/index.html | 4 +-- docs/utils/validator/isValidEmail/index.html | 4 +-- .../isValidPhoneNumberFormat/index.html | 4 +-- index.html | 4 +-- sitemap.xml | 2 +- 93 files changed, 187 insertions(+), 162 deletions(-) create mode 100644 assets/js/11738f66.6cc0b5df.js delete mode 100644 assets/js/11738f66.ef02aaa8.js delete mode 100644 assets/js/3209f55a.a6845fb4.js create mode 100644 assets/js/3209f55a.fd32b4b3.js delete mode 100644 assets/js/47a95eb2.589c62f2.js create mode 100644 assets/js/47a95eb2.b302f05f.js create mode 100644 assets/js/54102c04.10875f16.js delete mode 100644 assets/js/54102c04.ca829d2e.js delete mode 100644 assets/js/61a35b61.9c1f2eea.js create mode 100644 assets/js/61a35b61.ae6b4d49.js delete mode 100644 assets/js/67c089fb.1e156fa1.js create mode 100644 assets/js/67c089fb.db548f8d.js delete mode 100644 assets/js/935f2afb.4777aa80.js create mode 100644 assets/js/935f2afb.76166b0b.js create mode 100644 assets/js/9be130a4.244eaa74.js delete mode 100644 assets/js/9be130a4.8267ca4b.js create mode 100644 assets/js/b35b1276.3a974048.js delete mode 100644 assets/js/b35b1276.932bab46.js create mode 100644 assets/js/b3bf5b56.8c9a23f2.js delete mode 100644 assets/js/b3bf5b56.d46aa213.js create mode 100644 assets/js/bf0dbc92.62a32d49.js delete mode 100644 assets/js/bf0dbc92.c1529891.js create mode 100644 assets/js/db388e02.a60f06c5.js create mode 100644 assets/js/main.ce506dad.js rename assets/js/{main.e4a2413b.js.LICENSE.txt => main.ce506dad.js.LICENSE.txt} (100%) delete mode 100644 assets/js/main.e4a2413b.js delete mode 100644 assets/js/runtime~main.21487a8a.js create mode 100644 assets/js/runtime~main.21a7932b.js create mode 100644 docs/react/hooks/useBlockPromiseMultipleClick/index.html diff --git a/404.html b/404.html index 1f2a3bdb7..5f9152ec3 100644 --- a/404.html +++ b/404.html @@ -4,8 +4,8 @@ Page Not Found | @modern-kit - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

diff --git a/assets/js/11738f66.6cc0b5df.js b/assets/js/11738f66.6cc0b5df.js new file mode 100644 index 000000000..c3877f902 --- /dev/null +++ b/assets/js/11738f66.6cc0b5df.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4949],{7857:(e,t,n)=>{n.r(t),n.d(t,{ResizeObserver:()=>l,assets:()=>a,contentTitle:()=>s,default:()=>h,frontMatter:()=>c,metadata:()=>u,toc:()=>d});var r=n(1986),o=n(7355),i=n(5474);const c={},s="useResizeObserver",u={id:"react/hooks/useResizeObserver",title:"useResizeObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useResizeObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious"},next:{title:"useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout"}},a={},l=()=>{const e={br:"br",div:"div",...(0,o.a)()},{ref:t,contentRect:n}=(0,i.yU)((e=>{console.log("resize",e)}));return(0,r.jsxs)(e.div,{ref:t,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),`width: ${n.width}, height: ${n.height}`]})},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"useresizeobserver",children:"useResizeObserver"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"/**\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,r.jsx)(l,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>q,Mm:()=>V,ac:()=>Z,df:()=>W,iP:()=>G,nA:()=>J,uM:()=>P,wY:()=>F,yU:()=>B});var r=n(7800),o=n(1986),i=(n(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",v="[object Undefined]",b=u?u.toStringTag:void 0;var m="[object Symbol]",y=/\s/,g=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var O=NaN,w=/^[-+]0x[0-9a-f]+$/i,j=/^0b[01]+$/i,R=/^0o[0-7]+$/i,k=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:p:b&&b in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==m}(e))return O;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&y.test(e.charAt(t)););return t}(e)+1).replace(g,""):e}(e);var n=j.test(e);return n||R.test(e)?k(e.slice(2),n?2:8):w.test(e)?O:+e}var E=function(){return s.Date.now()},z=Math.max,S=Math.min;const C=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},T=(e,t,n={})=>{const o=C(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(t){var n=r,i=o;return r=o=void 0,a=t,c=e.apply(i,n)}function p(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function v(){var e=E();if(p(e))return b(e);s=setTimeout(v,function(e){var n=t-(e-u);return d?S(n,i-(e-a)):n}(e))}function b(e){return s=void 0,f&&r?h(e):(r=o=void 0,c)}function m(){var e=E(),n=p(e);if(r=arguments,o=this,u=e,n){if(void 0===s)return function(e){return a=e,s=setTimeout(v,t),l?h(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(v,t),h(u)}return void 0===s&&(s=setTimeout(v,t)),c}return t=M(t)||0,x(n)&&(l=!!n.leading,i=(d="maxWait"in n)?z(M(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},m.flush=function(){return void 0===s?c:b(E())},m}(o,t,n)),[o,t,n]);return(e=>{const t=C(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=T(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function N(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,D=()=>{},$=()=>!L(),U=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=C(null!=e?e:D),u=C((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return C((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},A=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),W=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=N(e,["action","calledOnce","threshold","root","rootMargin"]),a=U({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:A(t,a)},u,{children:e.children}))}));W.displayName="InView";const F=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:u}=e,a=N(e,["src","style","threshold","root","rootMargin"]);const l=U({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:A(t,l),style:d}))}));F.displayName="LazyImage";const H=$()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const J=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},V=()=>{const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>I(void 0,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}},Y=e=>!!$()&&window.matchMedia(e).matches,Z=e=>{const[t,n]=(0,r.useState)(Y(e)),o=(0,r.useCallback)((()=>{n(Y(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},q=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},B=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=C(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},G=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=T(c,n),u=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return H((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.ef02aaa8.js b/assets/js/11738f66.ef02aaa8.js deleted file mode 100644 index 8a67ba44e..000000000 --- a/assets/js/11738f66.ef02aaa8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4949],{7857:(e,t,n)=>{n.r(t),n.d(t,{ResizeObserver:()=>l,assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>s,metadata:()=>u,toc:()=>d});var r=n(1986),o=n(7355),i=n(5474);const s={},c="useResizeObserver",u={id:"react/hooks/useResizeObserver",title:"useResizeObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useResizeObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious"},next:{title:"useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout"}},a={},l=()=>{const e={br:"br",div:"div",...(0,o.a)()},{ref:t,contentRect:n}=(0,i.yU)((e=>{console.log("resize",e)}));return(0,r.jsxs)(e.div,{ref:t,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),`width: ${n.width}, height: ${n.height}`]})},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"useresizeobserver",children:"useResizeObserver"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"/**\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,r.jsx)(l,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var r=n(7800);const o={},i=r.createContext(o);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>Z,ac:()=>Y,df:()=>A,iP:()=>B,nA:()=>H,uM:()=>P,wY:()=>W,yU:()=>q});var r=n(7800),o=n(1986),i=(n(7143),"object"==typeof global&&global&&global.Object===Object&&global),s="object"==typeof self&&self&&self.Object===Object&&self,c=i||s||Function("return this")(),u=c.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",b="[object Undefined]",v=u?u.toStringTag:void 0;var m="[object Symbol]",g=/\s/,y=/^\s+/;function O(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var x=NaN,j=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,R=/^0o[0-7]+$/i,k=parseInt;function E(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?b:p:v&&v in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==m}(e))return x;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(y,""):e}(e);var n=w.test(e);return n||R.test(e)?k(e.slice(2),n?2:8):j.test(e)?x:+e}var M=function(){return c.Date.now()},z=Math.max,S=Math.min;const T=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},C=(e,t,n={})=>{const o=T(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,s,c,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(t){var n=r,i=o;return r=o=void 0,a=t,s=e.apply(i,n)}function p(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function b(){var e=M();if(p(e))return v(e);c=setTimeout(b,function(e){var n=t-(e-u);return d?S(n,i-(e-a)):n}(e))}function v(e){return c=void 0,f&&r?h(e):(r=o=void 0,s)}function m(){var e=M(),n=p(e);if(r=arguments,o=this,u=e,n){if(void 0===c)return function(e){return a=e,c=setTimeout(b,t),l?h(e):s}(u);if(d)return clearTimeout(c),c=setTimeout(b,t),h(u)}return void 0===c&&(c=setTimeout(b,t)),s}return t=E(t)||0,O(n)&&(l=!!n.leading,i=(d="maxWait"in n)?z(E(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==c&&clearTimeout(c),a=0,r=u=o=c=void 0},m.flush=function(){return void 0===c?s:v(M())},m}(o,t,n)),[o,t,n]);return(e=>{const t=T(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),s=C(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:s})};function N(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,I=()=>{},L=()=>!D(),$=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const s=(0,r.useRef)(null),c=T(null!=e?e:I),u=T((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;c&&c(e),t&&n.unobserve(r)}}));return T((e=>{s.current&&s.current.disconnect(),s.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&s.current.observe(e)}))},U=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),A=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:s,rootMargin:c}=e,u=N(e,["action","calledOnce","threshold","root","rootMargin"]),a=$({action:n,calledOnce:r,threshold:i,root:s,rootMargin:c});return(0,o.jsx)("div",Object.assign({ref:U(t,a)},u,{children:e.children}))})),W=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:s,root:c,rootMargin:u}=e,a=N(e,["src","style","threshold","root","rootMargin"]);const l=$({action:e=>{e.target.src=n},calledOnce:!0,threshold:s,root:c,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:U(t,l),style:d}))})),F=L()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const H=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},J=e=>!!L()&&window.matchMedia(e).matches,Y=e=>{const[t,n]=(0,r.useState)(J(e)),o=(0,r.useCallback)((()=>{n(J(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},Z=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},q=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=T(e),s=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:o,contentRect:t}},B=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),s=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),c=C(s,n),u=(0,r.useMemo)((()=>t?c:s),[s,t,c]);return F((()=>(s(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/3209f55a.a6845fb4.js b/assets/js/3209f55a.a6845fb4.js deleted file mode 100644 index a968f1571..000000000 --- a/assets/js/3209f55a.a6845fb4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4870],{2717:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>c,metadata:()=>o,toc:()=>d});var r=n(1986),t=n(7355);const c={},a="useAsyncPreservedCallback",o={id:"react/hooks/useAsyncPreservedCallback",title:"useAsyncPreservedCallback",description:"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useAsyncPreservedCallback.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"When",permalink:"/modern-kit/docs/react/components/When"},next:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"}},l={},d=[{value:"Interface",id:"interface",level:2}];function i(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{id:"useasyncpreservedcallback",children:"useAsyncPreservedCallback"}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/usePreservedCallback",children:"usePreservedCallback"})," \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(s.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-tsx",children:"const useAsyncPreservedCallback: Promise>(\n callback: T\n) => (...args: any[]) => Promise;\n"})})]})}function u(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},7355:(e,s,n)=>{n.d(s,{Z:()=>o,a:()=>a});var r=n(7800);const t={},c=r.createContext(t);function a(e){const s=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),r.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3209f55a.fd32b4b3.js b/assets/js/3209f55a.fd32b4b3.js new file mode 100644 index 000000000..ec81ee917 --- /dev/null +++ b/assets/js/3209f55a.fd32b4b3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4870],{2717:(e,s,r)=>{r.r(s),r.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>c,metadata:()=>o,toc:()=>i});var n=r(1986),t=r(7355);const c={},a="useAsyncPreservedCallback",o={id:"react/hooks/useAsyncPreservedCallback",title:"useAsyncPreservedCallback",description:"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useAsyncPreservedCallback.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"When",permalink:"/modern-kit/docs/react/components/When"},next:{title:"useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick"}},l={},i=[{value:"Interface",id:"interface",level:2}];function d(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{id:"useasyncpreservedcallback",children:"useAsyncPreservedCallback"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/usePreservedCallback",children:"usePreservedCallback"})," \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(s.h2,{id:"interface",children:"Interface"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-tsx",children:"const useAsyncPreservedCallback: Promise>(\n callback: T\n) => (...args: any[]) => Promise;\n"})})]})}function u(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},7355:(e,s,r)=>{r.d(s,{Z:()=>o,a:()=>a});var n=r(7800);const t={},c=n.createContext(t);function a(e){const s=n.useContext(c);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/47a95eb2.589c62f2.js b/assets/js/47a95eb2.589c62f2.js deleted file mode 100644 index fb74ed7a3..000000000 --- a/assets/js/47a95eb2.589c62f2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[410],{5777:(e,n,t)=>{t.r(n),t.d(n,{Input:()=>p,InputExample:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>s,toc:()=>f});var r=t(1986),o=t(7355),c=t(7800),a=t(5474);const i={},u="DebounceWrapper",s={id:"react/components/DebounceWrapper",title:"DebounceWrapper",description:"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/DebounceWrapper.mdx",sourceDirName:"react/components",slug:"/react/components/DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"\uc18c\uac1c",permalink:"/modern-kit/docs/introduce/"},next:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"}},l={},p=({onChange:e})=>{const n={input:"input",...(0,o.a)()},[t,a]=(0,c.useState)("");return(0,r.jsx)(n.input,{type:"text",onChange:n=>{a(n.target.value),e(n.target.value)},value:t})},d=()=>{const e={p:"p",...(0,o.a)()},[n,t]=(0,c.useState)("");return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.uM,{capture:"onChange",wait:500,children:(0,r.jsx)(p,{onChange:e=>{t(e)}})}),(0,r.jsxs)(e.p,{children:["Text: ",n]})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function h(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"debouncewrapper",children:"DebounceWrapper"}),"\n",(0,r.jsxs)(n.p,{children:["\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8",(0,r.jsx)(n.code,{children:"(ex: Click Event)"}),"\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type DebounceParameters = Parameters;\n\ninterface DebounceWrapperProps {\n children: JSX.Element; // \ud558\ub098\uc758 \uc694\uc18c\ub9cc children prop\uc73c\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n capture: string;\n wait: DebounceParameters[1]; // number\n options?: DebounceParameters[2]; // DebounceSettings\n}\n\nconst DebounceWrapper: ({\n children,\n capture,\n wait,\n options,\n}: DebounceWrapperProps) => React.FunctionComponentElement;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { DebounceWrapper } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,r.jsx)(n.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,r.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,r.jsx)(a.uM,{capture:"onClick",wait:500,children:(0,r.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,r.jsx)("br",{}),"\n","\n","\n",(0,r.jsx)(n.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,r.jsx)(d,{})]})}function g(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>a});var r=t(7800);const o={},c=r.createContext(o);function a(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(c.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>J,ac:()=>H,df:()=>z,iP:()=>Y,nA:()=>$,uM:()=>P,wY:()=>U,yU:()=>X});var r=t(7800),o=t(1986),c=(t(7143),"object"==typeof global&&global&&global.Object===Object&&global),a="object"==typeof self&&self&&self.Object===Object&&self,i=c||a||Function("return this")(),u=i.Symbol,s=Object.prototype,l=s.hasOwnProperty,p=s.toString,d=u?u.toStringTag:void 0,f=Object.prototype.toString,h="[object Null]",g="[object Undefined]",b=u?u.toStringTag:void 0;var v="[object Symbol]",m=/\s/,x=/^\s+/;function j(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var C=NaN,y=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,k=/^0o[0-7]+$/i,E=parseInt;function O(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?g:h:b&&b in Object(e)?function(e){var n=l.call(e,d),t=e[d];try{e[d]=void 0;var r=!0}catch(e){}var o=p.call(e);return r&&(n?e[d]=t:delete e[d]),o}(e):function(e){return f.call(e)}(e)}(e)==v}(e))return C;if(j(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=j(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&m.test(e.charAt(n)););return n}(e)+1).replace(x,""):e}(e);var t=w.test(e);return t||k.test(e)?E(e.slice(2),t?2:8):y.test(e)?C:+e}var D=function(){return i.Date.now()},M=Math.max,S=Math.min;const W=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},I=(e,n,t={})=>{const o=W(e),c=(0,r.useMemo)((()=>function(e,n,t){var r,o,c,a,i,u,s=0,l=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function f(n){var t=r,c=o;return r=o=void 0,s=n,a=e.apply(c,t)}function h(e){var t=e-u;return void 0===u||t>=n||t<0||p&&e-s>=c}function g(){var e=D();if(h(e))return b(e);i=setTimeout(g,function(e){var t=n-(e-u);return p?S(t,c-(e-s)):t}(e))}function b(e){return i=void 0,d&&r?f(e):(r=o=void 0,a)}function v(){var e=D(),t=h(e);if(r=arguments,o=this,u=e,t){if(void 0===i)return function(e){return s=e,i=setTimeout(g,n),l?f(e):a}(u);if(p)return clearTimeout(i),i=setTimeout(g,n),f(u)}return void 0===i&&(i=setTimeout(g,n)),a}return n=O(n)||0,j(t)&&(l=!!t.leading,c=(p="maxWait"in t)?M(O(t.maxWait)||0,n):c,d="trailing"in t?!!t.trailing:d),v.cancel=function(){void 0!==i&&clearTimeout(i),s=0,r=u=o=i=void 0},v.flush=function(){return void 0===i?a:b(D())},v}(o,n,t)),[o,n,t]);return(e=>{const n=W(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>c.cancel())),c},P=({children:e,capture:n,wait:t,options:o})=>{const c=r.Children.only(e),a=I(((...e)=>{const t=null==c?void 0:c.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(c,{[n]:a})};function T(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,B=()=>{},N=()=>!R(),L=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:c="0px 0px 0px 0px"})=>{const a=(0,r.useRef)(null),i=W(null!=e?e:B),u=W((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;i&&i(e),n&&t.unobserve(r)}}));return W((e=>{a.current&&a.current.disconnect(),a.current=new IntersectionObserver(u,{root:t,threshold:o,rootMargin:c}),e&&a.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),z=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:c,root:a,rootMargin:i}=e,u=T(e,["action","calledOnce","threshold","root","rootMargin"]),s=L({action:t,calledOnce:r,threshold:c,root:a,rootMargin:i});return(0,o.jsx)("div",Object.assign({ref:F(n,s)},u,{children:e.children}))})),U=(0,r.forwardRef)(((e,n)=>{var{src:t,style:c,threshold:a,root:i,rootMargin:u}=e,s=T(e,["src","style","threshold","root","rootMargin"]);const l=L({action:e=>{e.target.src=t},calledOnce:!0,threshold:a,root:i,rootMargin:u}),p=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},c)),[c]);return(0,o.jsx)("img",Object.assign({},s,{ref:F(n,l),style:p}))})),V=N()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const $=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},A=e=>!!N()&&window.matchMedia(e).matches,H=e=>{const[n,t]=(0,r.useState)(A(e)),o=(0,r.useCallback)((()=>{t(A(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},J=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},X=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),c=W(e),a=(0,r.useCallback)((([e])=>{e&&(c(e),t(e.contentRect))}),[c]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(a);return n.observe(e),()=>{n.unobserve(e)}}),[a]),{ref:o,contentRect:n}},Y=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,c]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{c({width:window.innerWidth,height:window.innerHeight})}),[]),i=I(a,t),u=(0,r.useMemo)((()=>n?i:a),[a,n,i]);return V((()=>(a(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/47a95eb2.b302f05f.js b/assets/js/47a95eb2.b302f05f.js new file mode 100644 index 000000000..a9dd27cc5 --- /dev/null +++ b/assets/js/47a95eb2.b302f05f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[410],{5777:(e,n,t)=>{t.r(n),t.d(n,{Input:()=>p,InputExample:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>v,frontMatter:()=>i,metadata:()=>s,toc:()=>f});var r=t(1986),o=t(7355),c=t(7800),a=t(5474);const i={},u="DebounceWrapper",s={id:"react/components/DebounceWrapper",title:"DebounceWrapper",description:"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/DebounceWrapper.mdx",sourceDirName:"react/components",slug:"/react/components/DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"\uc18c\uac1c",permalink:"/modern-kit/docs/introduce/"},next:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"}},l={},p=({onChange:e})=>{const n={input:"input",...(0,o.a)()},[t,a]=(0,c.useState)("");return(0,r.jsx)(n.input,{type:"text",onChange:n=>{a(n.target.value),e(n.target.value)},value:t})},d=()=>{const e={p:"p",...(0,o.a)()},[n,t]=(0,c.useState)("");return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.uM,{capture:"onChange",wait:500,children:(0,r.jsx)(p,{onChange:e=>{t(e)}})}),(0,r.jsxs)(e.p,{children:["Text: ",n]})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function h(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"debouncewrapper",children:"DebounceWrapper"}),"\n",(0,r.jsxs)(n.p,{children:["\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8",(0,r.jsx)(n.code,{children:"(ex: Click Event)"}),"\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type DebounceParameters = Parameters;\n\ninterface DebounceWrapperProps {\n children: JSX.Element; // \ud558\ub098\uc758 \uc694\uc18c\ub9cc children prop\uc73c\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n capture: string;\n wait: DebounceParameters[1]; // number\n options?: DebounceParameters[2]; // DebounceSettings\n}\n\nconst DebounceWrapper: ({\n children,\n capture,\n wait,\n options,\n}: DebounceWrapperProps) => React.FunctionComponentElement;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { DebounceWrapper } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,r.jsx)(n.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,r.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,r.jsx)(a.uM,{capture:"onClick",wait:500,children:(0,r.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,r.jsx)("br",{}),"\n","\n","\n",(0,r.jsx)(n.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,r.jsx)(d,{})]})}function v(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>a});var r=t(7800);const o={},c=r.createContext(o);function a(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(c.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>Y,Mm:()=>H,ac:()=>X,df:()=>V,iP:()=>q,nA:()=>A,uM:()=>P,wY:()=>U,yU:()=>Z});var r=t(7800),o=t(1986),c=(t(286),"object"==typeof global&&global&&global.Object===Object&&global),a="object"==typeof self&&self&&self.Object===Object&&self,i=c||a||Function("return this")(),u=i.Symbol,s=Object.prototype,l=s.hasOwnProperty,p=s.toString,d=u?u.toStringTag:void 0,f=Object.prototype.toString,h="[object Null]",v="[object Undefined]",g=u?u.toStringTag:void 0;var b="[object Symbol]",m=/\s/,x=/^\s+/;function y(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var j=NaN,C=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,k=/^0o[0-7]+$/i,E=parseInt;function O(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:h:g&&g in Object(e)?function(e){var n=l.call(e,d),t=e[d];try{e[d]=void 0;var r=!0}catch(e){}var o=p.call(e);return r&&(n?e[d]=t:delete e[d]),o}(e):function(e){return f.call(e)}(e)}(e)==b}(e))return j;if(y(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=y(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&m.test(e.charAt(n)););return n}(e)+1).replace(x,""):e}(e);var t=w.test(e);return t||k.test(e)?E(e.slice(2),t?2:8):C.test(e)?j:+e}var M=function(){return i.Date.now()},D=Math.max,S=Math.min;const I=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},W=(e,n,t={})=>{const o=I(e),c=(0,r.useMemo)((()=>function(e,n,t){var r,o,c,a,i,u,s=0,l=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function f(n){var t=r,c=o;return r=o=void 0,s=n,a=e.apply(c,t)}function h(e){var t=e-u;return void 0===u||t>=n||t<0||p&&e-s>=c}function v(){var e=M();if(h(e))return g(e);i=setTimeout(v,function(e){var t=n-(e-u);return p?S(t,c-(e-s)):t}(e))}function g(e){return i=void 0,d&&r?f(e):(r=o=void 0,a)}function b(){var e=M(),t=h(e);if(r=arguments,o=this,u=e,t){if(void 0===i)return function(e){return s=e,i=setTimeout(v,n),l?f(e):a}(u);if(p)return clearTimeout(i),i=setTimeout(v,n),f(u)}return void 0===i&&(i=setTimeout(v,n)),a}return n=O(n)||0,y(t)&&(l=!!t.leading,c=(p="maxWait"in t)?D(O(t.maxWait)||0,n):c,d="trailing"in t?!!t.trailing:d),b.cancel=function(){void 0!==i&&clearTimeout(i),s=0,r=u=o=i=void 0},b.flush=function(){return void 0===i?a:g(M())},b}(o,n,t)),[o,n,t]);return(e=>{const n=I(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>c.cancel())),c},P=({children:e,capture:n,wait:t,options:o})=>{const c=r.Children.only(e),a=W(((...e)=>{const t=null==c?void 0:c.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(c,{[n]:a})};function T(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,L=()=>{},B=()=>!N(),z=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:c="0px 0px 0px 0px"})=>{const a=(0,r.useRef)(null),i=I(null!=e?e:L),u=I((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;i&&i(e),n&&t.unobserve(r)}}));return I((e=>{a.current&&a.current.disconnect(),a.current=new IntersectionObserver(u,{root:t,threshold:o,rootMargin:c}),e&&a.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),V=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:c,root:a,rootMargin:i}=e,u=T(e,["action","calledOnce","threshold","root","rootMargin"]),s=z({action:t,calledOnce:r,threshold:c,root:a,rootMargin:i});return(0,o.jsx)("div",Object.assign({ref:F(n,s)},u,{children:e.children}))}));V.displayName="InView";const U=(0,r.forwardRef)(((e,n)=>{var{src:t,style:c,threshold:a,root:i,rootMargin:u}=e,s=T(e,["src","style","threshold","root","rootMargin"]);const l=z({action:e=>{e.target.src=t},calledOnce:!0,threshold:a,root:i,rootMargin:u}),p=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},c)),[c]);return(0,o.jsx)("img",Object.assign({},s,{ref:F(n,l),style:p}))}));U.displayName="LazyImage";const $=B()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const A=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},H=()=>{const[e,n]=(0,r.useState)(!1),t=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>R(void 0,void 0,void 0,(function*(){t.current||(t.current=!0,n(!0),yield e(),t.current=!1,n(!1))}))}},J=e=>!!B()&&window.matchMedia(e).matches,X=e=>{const[n,t]=(0,r.useState)(J(e)),o=(0,r.useCallback)((()=>{t(J(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},Y=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},Z=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),c=I(e),a=(0,r.useCallback)((([e])=>{e&&(c(e),t(e.contentRect))}),[c]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(a);return n.observe(e),()=>{n.unobserve(e)}}),[a]),{ref:o,contentRect:n}},q=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,c]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{c({width:window.innerWidth,height:window.innerHeight})}),[]),i=W(a,t),u=(0,r.useMemo)((()=>n?i:a),[a,n,i]);return $((()=>(a(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/54102c04.10875f16.js b/assets/js/54102c04.10875f16.js new file mode 100644 index 000000000..0f0728c28 --- /dev/null +++ b/assets/js/54102c04.10875f16.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2269],{8503:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>c,metadata:()=>a,toc:()=>u});var r=n(1986),o=n(7355),i=n(5474);const c={},s="LazyImage",a={id:"react/components/LazyImage",title:"LazyImage",description:"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/LazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"},next:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"}},l={},u=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Fallback",id:"fallback",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function d(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,r.jsx)(t.code,{children:"Lazy Loading"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"width"}),", ",(0,r.jsx)(t.code,{children:"height"})," \uac12\uc744 \uc785\ub825\ud574 \uc774\ubbf8\uc9c0\uc758 \ud06c\uae30\ub97c \uc870\uc808 \ud560 \uc218 \uc788\uc73c\uba70, \ub3d9\uc2dc\uc5d0 ",(0,r.jsx)(t.code,{children:"Layout Shift"}),"\ub97c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,r.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent & React.RefAttributes>\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"fallback",children:"Fallback"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const [isLoaded, setIsLoaded] = useState(false);\n\n const wrapperStyle: CSSProperties = {\n position: 'relative',\n width: '400px',\n height: '400px',\n };\n\n const imgStyle: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n opacity: isLoaded ? 1 : 0,\n transition: 'opacity 0.2s',\n };\n\n const skeletonStyle: CSSProperties = {\n width: '400px',\n height: '400px',\n backgroundColor: '#cdcbcb',\n }\n\n return (\n
\n {!isLoaded &&
}\n setIsLoaded(true)}\n />\n
\n );\n}; \n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsxs)("div",{style:{maxWidth:"500px",height:"500px",overflow:"scroll",background:"#f8f8f8"},children:[(0,r.jsx)("div",{style:{width:"100%",height:"500px",textAlign:"center",fontSize:"2rem"},children:(0,r.jsx)(t.p,{children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."})}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",onClick:()=>console.log("img click1")}),(0,r.jsx)("div",{style:{width:"100%",height:"150px"}}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",onClick:()=>console.log("img click2")}),(0,r.jsx)("div",{style:{width:"100%",height:"150px"}}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",onClick:()=>console.log("img click3")})]}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>q,Mm:()=>$,ac:()=>Z,df:()=>W,iP:()=>J,nA:()=>G,uM:()=>P,wY:()=>U,yU:()=>B});var r=n(7800),o=n(1986),i=(n(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),a=s.Symbol,l=Object.prototype,u=l.hasOwnProperty,d=l.toString,f=a?a.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",m="[object Undefined]",g=a?a.toStringTag:void 0;var v="[object Symbol]",b=/\s/,y=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,k=/^0o[0-7]+$/i,I=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?m:p:g&&g in Object(e)?function(e){var t=u.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==v}(e))return j;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&b.test(e.charAt(t)););return t}(e)+1).replace(y,""):e}(e);var n=O.test(e);return n||k.test(e)?I(e.slice(2),n?2:8):w.test(e)?j:+e}var S=function(){return s.Date.now()},E=Math.max,z=Math.min;const M=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},C=(e,t,n={})=>{const o=M(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,a,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(t){var n=r,i=o;return r=o=void 0,l=t,c=e.apply(i,n)}function p(e){var n=e-a;return void 0===a||n>=t||n<0||d&&e-l>=i}function m(){var e=S();if(p(e))return g(e);s=setTimeout(m,function(e){var n=t-(e-a);return d?z(n,i-(e-l)):n}(e))}function g(e){return s=void 0,f&&r?h(e):(r=o=void 0,c)}function v(){var e=S(),n=p(e);if(r=arguments,o=this,a=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),u?h(e):c}(a);if(d)return clearTimeout(s),s=setTimeout(m,t),h(a)}return void 0===s&&(s=setTimeout(m,t)),c}return t=L(t)||0,x(n)&&(u=!!n.leading,i=(d="maxWait"in n)?E(L(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),v.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=a=o=s=void 0},v.flush=function(){return void 0===s?c:g(S())},v}(o,t,n)),[o,t,n]);return(e=>{const t=M(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=C(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function R(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,A=()=>{},D=()=>!N(),F=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=M(null!=e?e:A),a=M((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return M((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(a,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},V=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),W=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,a=R(e,["action","calledOnce","threshold","root","rootMargin"]),l=F({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:V(t,l)},a,{children:e.children}))}));W.displayName="InView";const U=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:a}=e,l=R(e,["src","style","threshold","root","rootMargin"]);const u=F({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:a}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},l,{ref:V(t,u),style:d}))}));U.displayName="LazyImage";const Y=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const G=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},$=()=>{const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>T(void 0,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}},H=e=>!!D()&&window.matchMedia(e).matches,Z=e=>{const[t,n]=(0,r.useState)(H(e)),o=(0,r.useCallback)((()=>{n(H(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},q=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},B=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=M(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},J=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=C(c,n),a=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return Y((()=>(c(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/54102c04.ca829d2e.js b/assets/js/54102c04.ca829d2e.js deleted file mode 100644 index 2cf21170c..000000000 --- a/assets/js/54102c04.ca829d2e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2269],{8503:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>c,metadata:()=>a,toc:()=>d});var r=n(1986),o=n(7355),i=n(5474);const c={},s="LazyImage",a={id:"react/components/LazyImage",title:"LazyImage",description:"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/LazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"},next:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"}},l={},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Fallback",id:"fallback",level:3},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function u(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,r.jsx)(t.code,{children:"Lazy Loading"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"width"}),", ",(0,r.jsx)(t.code,{children:"height"})," \uac12\uc744 \uc785\ub825\ud574 \uc774\ubbf8\uc9c0\uc758 \ud06c\uae30\ub97c \uc870\uc808 \ud560 \uc218 \uc788\uc73c\uba70, \ub3d9\uc2dc\uc5d0 ",(0,r.jsx)(t.code,{children:"Layout Shift"}),"\ub97c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,r.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent & React.RefAttributes>\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"fallback",children:"Fallback"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const [isLoaded, setIsLoaded] = useState(false);\n\n const wrapperStyle: CSSProperties = {\n position: 'relative',\n width: '400px',\n height: '400px',\n };\n\n const imgStyle: CSSProperties = {\n position: 'absolute',\n top: 0,\n left: 0,\n opacity: isLoaded ? 1 : 0,\n transition: 'opacity 0.2s',\n };\n\n const skeletonStyle: CSSProperties = {\n width: '400px',\n height: '400px',\n backgroundColor: '#cdcbcb',\n }\n\n return (\n
\n {!isLoaded &&
}\n setIsLoaded(true)}\n />\n
\n );\n}; \n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsxs)("div",{style:{maxWidth:"500px",height:"500px",overflow:"scroll",background:"#f8f8f8"},children:[(0,r.jsx)("div",{style:{width:"100%",height:"500px",textAlign:"center",fontSize:"2rem"},children:(0,r.jsx)(t.p,{children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."})}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",onClick:()=>console.log("img click1")}),(0,r.jsx)("div",{style:{width:"100%",height:"150px"}}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",onClick:()=>console.log("img click2")}),(0,r.jsx)("div",{style:{width:"100%",height:"150px"}}),(0,r.jsx)(i.wY,{width:"100%",height:400,src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",onClick:()=>console.log("img click3")})]}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>H,ac:()=>$,df:()=>W,iP:()=>q,nA:()=>Y,uM:()=>P,wY:()=>U,yU:()=>Z});var r=n(7800),o=n(1986),i=(n(7143),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),a=s.Symbol,l=Object.prototype,d=l.hasOwnProperty,u=l.toString,f=a?a.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",m="[object Undefined]",g=a?a.toStringTag:void 0;var v="[object Symbol]",b=/\s/,x=/^\s+/;function y(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,k=/^0o[0-7]+$/i,I=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?m:p:g&&g in Object(e)?function(e){var t=d.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=u.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==v}(e))return j;if(y(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=y(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&b.test(e.charAt(t)););return t}(e)+1).replace(x,""):e}(e);var n=O.test(e);return n||k.test(e)?I(e.slice(2),n?2:8):w.test(e)?j:+e}var S=function(){return s.Date.now()},E=Math.max,z=Math.min;const C=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},M=(e,t,n={})=>{const o=C(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,a,l=0,d=!1,u=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(t){var n=r,i=o;return r=o=void 0,l=t,c=e.apply(i,n)}function p(e){var n=e-a;return void 0===a||n>=t||n<0||u&&e-l>=i}function m(){var e=S();if(p(e))return g(e);s=setTimeout(m,function(e){var n=t-(e-a);return u?z(n,i-(e-l)):n}(e))}function g(e){return s=void 0,f&&r?h(e):(r=o=void 0,c)}function v(){var e=S(),n=p(e);if(r=arguments,o=this,a=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),d?h(e):c}(a);if(u)return clearTimeout(s),s=setTimeout(m,t),h(a)}return void 0===s&&(s=setTimeout(m,t)),c}return t=L(t)||0,y(n)&&(d=!!n.leading,i=(u="maxWait"in n)?E(L(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),v.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=a=o=s=void 0},v.flush=function(){return void 0===s?c:g(S())},v}(o,t,n)),[o,t,n]);return(e=>{const t=C(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=M(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function R(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,N=()=>{},A=()=>!T(),D=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=C(null!=e?e:N),a=C((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return C((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(a,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),W=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,a=R(e,["action","calledOnce","threshold","root","rootMargin"]),l=D({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:F(t,l)},a,{children:e.children}))})),U=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:a}=e,l=R(e,["src","style","threshold","root","rootMargin"]);const d=D({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:a}),u=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},l,{ref:F(t,d),style:u}))})),V=A()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const Y=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},G=e=>!!A()&&window.matchMedia(e).matches,$=e=>{const[t,n]=(0,r.useState)(G(e)),o=(0,r.useCallback)((()=>{n(G(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},H=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},Z=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=C(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},q=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=M(c,n),a=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return V((()=>(c(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/61a35b61.9c1f2eea.js b/assets/js/61a35b61.9c1f2eea.js deleted file mode 100644 index 37273d5d4..000000000 --- a/assets/js/61a35b61.9c1f2eea.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9034],{6855:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>l,assets:()=>a,contentTitle:()=>s,default:()=>p,frontMatter:()=>c,metadata:()=>u,toc:()=>d});var r=n(1986),o=n(7355),i=n(5474);const c={},s="useMediaQuery",u={id:"react/hooks/useMediaQuery",title:"useMediaQuery",description:"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMediaQuery.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIsomorphicLayoutEffect",permalink:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},next:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"}},a={},l=()=>{const e={div:"div",p:"p",...(0,o.a)()},{isMatch:t}=(0,i.ac)("(min-width: 768px)");return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,r.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"}),"\n",(0,r.jsx)(t.p,{children:"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"const useMediaQuery: (query: string) => {\n isMatch: boolean;\n}\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const { isMatch } = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n\n"})}),"\n","\n",(0,r.jsx)(l,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>Y,ac:()=>H,df:()=>F,iP:()=>B,nA:()=>q,uM:()=>I,wY:()=>W,yU:()=>Z});var r=n(7800),o=n(1986),i=(n(7143),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,p=Object.prototype.toString,h="[object Null]",v="[object Undefined]",m=u?u.toStringTag:void 0;var y="[object Symbol]",b=/\s/,g=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,O=/^0o[0-7]+$/i,E=parseInt;function k(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:h:m&&m in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return p.call(e)}(e)}(e)==y}(e))return j;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&b.test(e.charAt(t)););return t}(e)+1).replace(g,""):e}(e);var n=M.test(e);return n||O.test(e)?E(e.slice(2),n?2:8):w.test(e)?j:+e}var S=function(){return s.Date.now()},R=Math.max,C=Math.min;const Q=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},T=(e,t,n={})=>{const o=Q(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var n=r,i=o;return r=o=void 0,a=t,c=e.apply(i,n)}function h(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function v(){var e=S();if(h(e))return m(e);s=setTimeout(v,function(e){var n=t-(e-u);return d?C(n,i-(e-a)):n}(e))}function m(e){return s=void 0,f&&r?p(e):(r=o=void 0,c)}function y(){var e=S(),n=h(e);if(r=arguments,o=this,u=e,n){if(void 0===s)return function(e){return a=e,s=setTimeout(v,t),l?p(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(v,t),p(u)}return void 0===s&&(s=setTimeout(v,t)),c}return t=k(t)||0,x(n)&&(l=!!n.leading,i=(d="maxWait"in n)?R(k(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),y.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},y.flush=function(){return void 0===s?c:m(S())},y}(o,t,n)),[o,t,n]);return(e=>{const t=Q(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},I=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=T(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function P(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,z=()=>{},N=()=>!L(),D=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=Q(null!=e?e:z),u=Q((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return Q((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},U=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),F=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=P(e,["action","calledOnce","threshold","root","rootMargin"]),a=D({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:U(t,a)},u,{children:e.children}))})),W=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:u}=e,a=P(e,["src","style","threshold","root","rootMargin"]);const l=D({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:U(t,l),style:d}))})),$=N()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const q=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},A=e=>!!N()&&window.matchMedia(e).matches,H=e=>{const[t,n]=(0,r.useState)(A(e)),o=(0,r.useCallback)((()=>{n(A(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},Y=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},Z=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=Q(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},B=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=T(c,n),u=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return $((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/61a35b61.ae6b4d49.js b/assets/js/61a35b61.ae6b4d49.js new file mode 100644 index 000000000..1e6a48501 --- /dev/null +++ b/assets/js/61a35b61.ae6b4d49.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9034],{6855:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>l,assets:()=>a,contentTitle:()=>s,default:()=>p,frontMatter:()=>c,metadata:()=>u,toc:()=>d});var r=n(1986),o=n(7355),i=n(5474);const c={},s="useMediaQuery",u={id:"react/hooks/useMediaQuery",title:"useMediaQuery",description:"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMediaQuery.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIsomorphicLayoutEffect",permalink:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},next:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"}},a={},l=()=>{const e={div:"div",p:"p",...(0,o.a)()},{isMatch:t}=(0,i.ac)("(min-width: 768px)");return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,r.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"}),"\n",(0,r.jsx)(t.p,{children:"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"const useMediaQuery: (query: string) => {\n isMatch: boolean;\n}\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const { isMatch } = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n\n"})}),"\n","\n",(0,r.jsx)(l,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>Z,Mm:()=>H,ac:()=>Y,df:()=>W,iP:()=>G,nA:()=>A,uM:()=>T,wY:()=>$,yU:()=>B});var r=n(7800),o=n(1986),i=(n(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,p=Object.prototype.toString,h="[object Null]",v="[object Undefined]",y=u?u.toStringTag:void 0;var m="[object Symbol]",g=/\s/,b=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var w=NaN,j=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,O=/^0o[0-7]+$/i,k=parseInt;function E(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:h:y&&y in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return p.call(e)}(e)}(e)==m}(e))return w;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(b,""):e}(e);var n=M.test(e);return n||O.test(e)?k(e.slice(2),n?2:8):j.test(e)?w:+e}var S=function(){return s.Date.now()},R=Math.max,C=Math.min;const I=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},Q=(e,t,n={})=>{const o=I(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var n=r,i=o;return r=o=void 0,a=t,c=e.apply(i,n)}function h(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function v(){var e=S();if(h(e))return y(e);s=setTimeout(v,function(e){var n=t-(e-u);return d?C(n,i-(e-a)):n}(e))}function y(e){return s=void 0,f&&r?p(e):(r=o=void 0,c)}function m(){var e=S(),n=h(e);if(r=arguments,o=this,u=e,n){if(void 0===s)return function(e){return a=e,s=setTimeout(v,t),l?p(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(v,t),p(u)}return void 0===s&&(s=setTimeout(v,t)),c}return t=E(t)||0,x(n)&&(l=!!n.leading,i=(d="maxWait"in n)?R(E(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},m.flush=function(){return void 0===s?c:y(S())},m}(o,t,n)),[o,t,n]);return(e=>{const t=I(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},T=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=Q(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function L(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,z=()=>{},D=()=>!N(),U=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=I(null!=e?e:z),u=I((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return I((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),W=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=L(e,["action","calledOnce","threshold","root","rootMargin"]),a=U({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:F(t,a)},u,{children:e.children}))}));W.displayName="InView";const $=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:u}=e,a=L(e,["src","style","threshold","root","rootMargin"]);const l=U({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:F(t,l),style:d}))}));$.displayName="LazyImage";const q=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const A=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},H=()=>{const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>P(void 0,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}},V=e=>!!D()&&window.matchMedia(e).matches,Y=e=>{const[t,n]=(0,r.useState)(V(e)),o=(0,r.useCallback)((()=>{n(V(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},Z=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},B=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=I(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},G=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=Q(c,n),u=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return q((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/67c089fb.1e156fa1.js b/assets/js/67c089fb.1e156fa1.js deleted file mode 100644 index f5f547a8e..000000000 --- a/assets/js/67c089fb.1e156fa1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3776],{3552:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>u,contentTitle:()=>r,default:()=>l,frontMatter:()=>c,metadata:()=>a,toc:()=>d});var t=o(1986),s=o(7355);const c={},r="useDebounce",a={id:"react/hooks/useDebounce",title:"useDebounce",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebounce.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"},next:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"}},u={},d=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function i(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"usedebounce",children:"useDebounce"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\n\nconst useDebounce: (\n callback: DebounceParameters[0], // (...args: any) => any\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n) => DebouncedFunc<(...args: any) => any>;\n"})}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const handle = useDebounce(() => {\n console.log('debounce');\n }, 500);\n\n return ;\n};\n"})})]})}function l(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(i,{...e})}):i(e)}},7355:(e,n,o)=>{o.d(n,{Z:()=>a,a:()=>r});var t=o(7800);const s={},c=t.createContext(s);function r(e){const n=t.useContext(c);return t.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(s):e.components||s:r(e.components),t.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/67c089fb.db548f8d.js b/assets/js/67c089fb.db548f8d.js new file mode 100644 index 000000000..144cb98cc --- /dev/null +++ b/assets/js/67c089fb.db548f8d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3776],{3552:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>u,contentTitle:()=>r,default:()=>l,frontMatter:()=>c,metadata:()=>a,toc:()=>i});var t=o(1986),s=o(7355);const c={},r="useDebounce",a={id:"react/hooks/useDebounce",title:"useDebounce",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebounce.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick"},next:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"}},u={},i=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"usedebounce",children:"useDebounce"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\n\nconst useDebounce: (\n callback: DebounceParameters[0], // (...args: any) => any\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n) => DebouncedFunc<(...args: any) => any>;\n"})}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const handle = useDebounce(() => {\n console.log('debounce');\n }, 500);\n\n return ;\n};\n"})})]})}function l(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},7355:(e,n,o)=>{o.d(n,{Z:()=>a,a:()=>r});var t=o(7800);const s={},c=t.createContext(s);function r(e){const n=t.useContext(c);return t.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(s):e.components||s:r(e.components),t.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.4777aa80.js b/assets/js/935f2afb.4777aa80.js deleted file mode 100644 index 9628ddb6b..000000000 --- a/assets/js/935f2afb.4777aa80.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduce","href":"/modern-kit/docs/introduce/","docId":"introduce/Introduce","unlisted":false},{"type":"category","label":"react","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"DebounceWrapper","href":"/modern-kit/docs/react/components/DebounceWrapper","docId":"react/components/DebounceWrapper","unlisted":false},{"type":"link","label":"InView","href":"/modern-kit/docs/react/components/InView","docId":"react/components/InView","unlisted":false},{"type":"link","label":"LazyImage","href":"/modern-kit/docs/react/components/LazyImage","docId":"react/components/LazyImage","unlisted":false},{"type":"link","label":"Portal","href":"/modern-kit/docs/react/components/Portal","docId":"react/components/Portal","unlisted":false},{"type":"link","label":"When","href":"/modern-kit/docs/react/components/When","docId":"react/components/When","unlisted":false}]},{"type":"category","label":"hooks","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"useAsyncPreservedCallback","href":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","docId":"react/hooks/useAsyncPreservedCallback","unlisted":false},{"type":"link","label":"useDebounce","href":"/modern-kit/docs/react/hooks/useDebounce","docId":"react/hooks/useDebounce","unlisted":false},{"type":"link","label":"useForceUpdate","href":"/modern-kit/docs/react/hooks/useForceUpdate","docId":"react/hooks/useForceUpdate","unlisted":false},{"type":"link","label":"useImageStatus","href":"/modern-kit/docs/react/hooks/useImageStatus","docId":"react/hooks/useImageStatus","unlisted":false},{"type":"link","label":"useIntersectionObserver","href":"/modern-kit/docs/react/hooks/useIntersectionObserver","docId":"react/hooks/useIntersectionObserver","unlisted":false},{"type":"link","label":"useInterval","href":"/modern-kit/docs/react/hooks/useInterval","docId":"react/hooks/useInterval","unlisted":false},{"type":"link","label":"useIsMounted","href":"/modern-kit/docs/react/hooks/useIsMounted","docId":"react/hooks/useIsMounted","unlisted":false},{"type":"link","label":"useIsomorphicLayoutEffect","href":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","docId":"react/hooks/useIsomorphicLayoutEffect","unlisted":false},{"type":"link","label":"useMediaQuery","href":"/modern-kit/docs/react/hooks/useMediaQuery","docId":"react/hooks/useMediaQuery","unlisted":false},{"type":"link","label":"useMergeRefs","href":"/modern-kit/docs/react/hooks/useMergeRefs","docId":"react/hooks/useMergeRefs","unlisted":false},{"type":"link","label":"useOnClickOutside","href":"/modern-kit/docs/react/hooks/useOnClickOutside","docId":"react/hooks/useOnClickOutside","unlisted":false},{"type":"link","label":"usePreservedCallback","href":"/modern-kit/docs/react/hooks/usePreservedCallback","docId":"react/hooks/usePreservedCallback","unlisted":false},{"type":"link","label":"usePreservedState","href":"/modern-kit/docs/react/hooks/usePreservedState","docId":"react/hooks/usePreservedState","unlisted":false},{"type":"link","label":"usePrevious","href":"/modern-kit/docs/react/hooks/usePrevious","docId":"react/hooks/usePrevious","unlisted":false},{"type":"link","label":"useResizeObserver","href":"/modern-kit/docs/react/hooks/useResizeObserver","docId":"react/hooks/useResizeObserver","unlisted":false},{"type":"link","label":"useTimeout","href":"/modern-kit/docs/react/hooks/useTimeout","docId":"react/hooks/useTimeout","unlisted":false},{"type":"link","label":"useToggle","href":"/modern-kit/docs/react/hooks/useToggle","docId":"react/hooks/useToggle","unlisted":false},{"type":"link","label":"useUnMount","href":"/modern-kit/docs/react/hooks/useUnmount","docId":"react/hooks/useUnmount","unlisted":false},{"type":"link","label":"useVisibilityChange","href":"/modern-kit/docs/react/hooks/useVisibilityChange","docId":"react/hooks/useVisibilityChange","unlisted":false},{"type":"link","label":"useWindowScrollTo","href":"/modern-kit/docs/react/hooks/useWindowScrollTo","docId":"react/hooks/useWindowScrollTo","unlisted":false},{"type":"link","label":"useWindowSize","href":"/modern-kit/docs/react/hooks/useWindowSize","docId":"react/hooks/useWindowSize","unlisted":false}]}]},{"type":"category","label":"utils","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"common","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"abRandom","href":"/modern-kit/docs/utils/common/abRandom","docId":"utils/common/abRandom","unlisted":false},{"type":"link","label":"asyncNoop","href":"/modern-kit/docs/utils/common/asyncNoop","docId":"utils/common/asyncNoop","unlisted":false},{"type":"link","label":"deepCopy","href":"/modern-kit/docs/utils/common/deepCopy","docId":"utils/common/deepCopy","unlisted":false},{"type":"link","label":"deepEqual","href":"/modern-kit/docs/utils/common/deepEqual","docId":"utils/common/deepEqual","unlisted":false},{"type":"link","label":"getUniqId","href":"/modern-kit/docs/utils/common/getUniqId","docId":"utils/common/getUniqId","unlisted":false},{"type":"link","label":"getUniqTime","href":"/modern-kit/docs/utils/common/getUniqTime","docId":"utils/common/getUniqTime","unlisted":false},{"type":"link","label":"getViewportSize","href":"/modern-kit/docs/utils/common/getViewportSize","docId":"utils/common/getViewportSize","unlisted":false},{"type":"link","label":"hexToRgba","href":"/modern-kit/docs/utils/common/hexToRgba","docId":"utils/common/hexToRgba","unlisted":false},{"type":"link","label":"noop","href":"/modern-kit/docs/utils/common/noop","docId":"utils/common/noop","unlisted":false},{"type":"link","label":"wrapInArray","href":"/modern-kit/docs/utils/common/wrapInArray","docId":"utils/common/wrapInArray","unlisted":false}]},{"type":"category","label":"device","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getOS","href":"/modern-kit/docs/utils/device/getOS","docId":"utils/device/getOS","unlisted":false},{"type":"link","label":"isClient","href":"/modern-kit/docs/utils/device/isClient","docId":"utils/device/isClient","unlisted":false},{"type":"link","label":"isMobile","href":"/modern-kit/docs/utils/device/isMobile","docId":"utils/device/isMobile","unlisted":false},{"type":"link","label":"isServer","href":"/modern-kit/docs/utils/device/isSever","docId":"utils/device/isSever","unlisted":false}]},{"type":"category","label":"object","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"deleteEmptyProperties","href":"/modern-kit/docs/utils/object/deleteEmptyProperties","docId":"utils/object/deleteEmptyProperties","unlisted":false},{"type":"link","label":"mergeProperties","href":"/modern-kit/docs/utils/object/mergeProperties","docId":"utils/object/mergeProperties","unlisted":false},{"type":"link","label":"objectEntries","href":"/modern-kit/docs/utils/object/objectEntries","docId":"utils/object/objectEntries","unlisted":false},{"type":"link","label":"objectKeys","href":"/modern-kit/docs/utils/object/objectKeys","docId":"utils/object/objectKeys","unlisted":false},{"type":"link","label":"objectValues","href":"/modern-kit/docs/utils/object/objectValues","docId":"utils/object/objectValues","unlisted":false},{"type":"link","label":"omit","href":"/modern-kit/docs/utils/object/omit","docId":"utils/object/omit","unlisted":false},{"type":"link","label":"pick","href":"/modern-kit/docs/utils/object/pick","docId":"utils/object/pick","unlisted":false}]},{"type":"category","label":"string","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"countSubstringOccurrences","href":"/modern-kit/docs/utils/string/countSubstringOccurrences","docId":"utils/string/countSubstringOccurrences","unlisted":false},{"type":"link","label":"extractNumber","href":"/modern-kit/docs/utils/string/extractNumber","docId":"utils/string/extractNumber","unlisted":false},{"type":"link","label":"formatNumberWithCommas","href":"/modern-kit/docs/utils/string/formatNumberWithCommas","docId":"utils/string/formatNumberWithCommas","unlisted":false},{"type":"link","label":"formatPhoneNumber","href":"/modern-kit/docs/utils/string/formatPhoneNumber","docId":"utils/string/formatPhoneNumber","unlisted":false},{"type":"link","label":"removeSpecialCharacters","href":"/modern-kit/docs/utils/string/removeSpecialCharacters","docId":"utils/string/removeSpecialCharacters","unlisted":false},{"type":"link","label":"repeatCharacters","href":"/modern-kit/docs/utils/string/repeatCharacters","docId":"utils/string/repeatCharacters","unlisted":false}]},{"type":"category","label":"validator","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"hasProperty","href":"/modern-kit/docs/utils/validator/hasProperty","docId":"utils/validator/hasProperty","unlisted":false},{"type":"link","label":"isFunction","href":"/modern-kit/docs/utils/validator/isFuntion","docId":"utils/validator/isFuntion","unlisted":false},{"type":"link","label":"isNotNullish","href":"/modern-kit/docs/utils/validator/isNotNullish","docId":"utils/validator/isNotNullish","unlisted":false},{"type":"link","label":"isNullish","href":"/modern-kit/docs/utils/validator/isNullish","docId":"utils/validator/isNullish","unlisted":false},{"type":"link","label":"isNumber","href":"/modern-kit/docs/utils/validator/isNumber","docId":"utils/validator/isNumber","unlisted":false},{"type":"link","label":"isValidEmail","href":"/modern-kit/docs/utils/validator/isValidEmail","docId":"utils/validator/isValidEmail","unlisted":false},{"type":"link","label":"isValidPhoneNumberFormat","href":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","docId":"utils/validator/isValidPhoneNumberFormat","unlisted":false}]}]}]},"docs":{"introduce/Introduce":{"id":"introduce/Introduce","title":"\uc18c\uac1c","description":"modern-kit\ub294 \uc720\uc6a9\ud55c \ub9ac\uc561\ud2b8 UI \ucef4\ud3ec\ub10c\ud2b8, \ub9ac\uc561\ud2b8 \ucee4\uc2a4\ud140 \ud6c5 \ubc0f \ub2e4\uc591\ud55c \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\ub97c \uc81c\uacf5\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/DebounceWrapper":{"id":"react/components/DebounceWrapper","title":"DebounceWrapper","description":"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/InView":{"id":"react/components/InView","title":"InView","description":"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/LazyImage":{"id":"react/components/LazyImage","title":"LazyImage","description":"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Portal":{"id":"react/components/Portal","title":"Portal","description":"Portal \ucef4\ud3ec\ub10c\ud2b8\ub294 React.createPortal\uc744 \uc0ac\uc6a9\ud574 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 DOM \uacc4\uce35 \uad6c\uc870 \uc678\ubd80\uc758 DOM \ub178\ub4dc\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/When":{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useAsyncPreservedCallback":{"id":"react/hooks/useAsyncPreservedCallback","title":"useAsyncPreservedCallback","description":"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebounce":{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useForceUpdate":{"id":"react/hooks/useForceUpdate","title":"useForceUpdate","description":"\ubc18\ud658\ub41c \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba74 \uac15\uc81c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1 \uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useImageStatus":{"id":"react/hooks/useImageStatus","title":"useImageStatus","description":"\ubc18\ud658\ub41c ref\ub97c ` \ud0dc\uadf8\uc5d0 \ud560\ub2f9\ud558\uba74 \uc774\ubbf8\uc9c0 \ub85c\ub4dc\ud558\ub294 \uacfc\uc815\uc5d0\uc11c pending, loading, complete, error` \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIntersectionObserver":{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub418\ub294 \uc2dc\uc810\uc5d0 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useInterval":{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsMounted":{"id":"react/hooks/useIsMounted","title":"useIsMounted","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\ub294\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsomorphicLayoutEffect":{"id":"react/hooks/useIsomorphicLayoutEffect","title":"useIsomorphicLayoutEffect","description":"useIsomorphicLayoutEffect\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1 \ud658\uacbd\uc5d0\uc11c\ub3c4 \ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \ubcf4\uc7a5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMediaQuery":{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMergeRefs":{"id":"react/hooks/useMergeRefs","title":"useMergeRefs","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uc5ec\ub7ec \uac1c\uc758 ref\ub97c \ud558\ub098\ub85c \ubcd1\ud569\ud560 \ub54c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useOnClickOutside":{"id":"react/hooks/useOnClickOutside","title":"useOnClickOutside","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8 \uc678\ubd80 \uc694\uc18c\ub97c \ud074\ub9ad \ud560 \uacbd\uc6b0 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedCallback":{"id":"react/hooks/usePreservedCallback","title":"usePreservedCallback","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\ub97c \ubcf4\uc874\ud558\uace0 \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedState":{"id":"react/hooks/usePreservedState","title":"usePreservedState","description":"comparator\ub85c \ube44\uad50\ud588\uc744 \ub54c \uac12\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePrevious":{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useResizeObserver":{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useTimeout":{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useToggle":{"id":"react/hooks/useToggle","title":"useToggle","description":"boolean \ud0c0\uc785\uc758 state\ub97c Toggle\ub85c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUnmount":{"id":"react/hooks/useUnmount","title":"useUnMount","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVisibilityChange":{"id":"react/hooks/useVisibilityChange","title":"useVisibilityChange","description":"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowScrollTo":{"id":"react/hooks/useWindowScrollTo","title":"useWindowScrollTo","description":"window.scrollTo()\ub97c \ud3b8\ud558\uac8c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowSize":{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/abRandom":{"id":"utils/common/abRandom","title":"abRandom","description":"50% \ud655\ub960\ub85c 0\ub610\ub294 1\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/asyncNoop":{"id":"utils/common/asyncNoop","title":"asyncNoop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, Promise\ub97c \ubc18\ud658\ud558\ub294 async \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepCopy":{"id":"utils/common/deepCopy","title":"deepCopy","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uac12\uc744 \uae4a\uc740 \ubcf5\uc0ac\ub97c \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepEqual":{"id":"utils/common/deepEqual","title":"deepEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqId":{"id":"utils/common/getUniqId","title":"getUniqId","description":"\uc720\ub2c8\ud06c\ud55c \uc544\uc774\ub514\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqTime":{"id":"utils/common/getUniqTime","title":"getUniqTime","description":"\uae30\ubcf8\uc801\uc73c\ub85c new Date().getTime() \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc774\uc9c0\ub9cc, \ub3d9\uc77c \uc2dc\uac04\uc5d0 \uc5ec\ub7ec\ubc88 \ud638\ucd9c \ud560 \uacbd\uc6b0 \uc720\ub2c8\ud06c \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getViewportSize":{"id":"utils/common/getViewportSize","title":"getViewportSize","description":"\ud604\uc7ac Viewport Size\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/hexToRgba":{"id":"utils/common/hexToRgba","title":"hexToRgba","description":"16\uc9c4\uc218 \uc0c9\uc0c1 \ucf54\ub4dc(Hex)\ub97c RGB\ud615\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. (HEX -> RGB)","sidebar":"tutorialSidebar"},"utils/common/noop":{"id":"utils/common/noop","title":"noop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, undefined\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/wrapInArray":{"id":"utils/common/wrapInArray","title":"wrapInArray","description":"\ubc30\uc5f4\uc774 \uc544\ub2c8\ub77c\uba74 \ub798\ud551\ub41c \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\uace0, \ubc30\uc5f4\uc774\ub77c\uba74 \ub798\ud551\ud558\uc9c0 \uc54a\uace0 \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/getOS":{"id":"utils/device/getOS","title":"getOS","description":"userAgent\ub97c \uae30\ubc18\uc73c\ub85c OS \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isClient":{"id":"utils/device/isClient","title":"isClient","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isMobile":{"id":"utils/device/isMobile","title":"isMobile","description":"\ubaa8\ubc14\uc77c \ud658\uacbd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isSever":{"id":"utils/device/isSever","title":"isServer","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \uc11c\ubc84(Node.js)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/deleteEmptyProperties":{"id":"utils/object/deleteEmptyProperties","title":"deleteEmptyProperties","description":"\uac1d\uccb4\uc758 \uc911\ucca9 \uac1d\uccb4/\ubc30\uc5f4\uc744 \ud3ec\ud568\ud55c \ubaa8\ub4e0 \ud504\ub85c\ud37c\ud2f0\ub97c \uc21c\ud68c\ud558\uba74\uc11c \uac12\uc774 \uc544\ub798 \ub098\uc5f4\ud55c \ube48 \uac12\ub4e4 \uc911 \ud558\ub098\ub77c\uba74, \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0\ub4e4\uc744 \uc81c\uac70\ud55c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mergeProperties":{"id":"utils/object/mergeProperties","title":"mergeProperties","description":"\uae30\uc900\uc774 \ub418\ub294 target \uac1d\uccb4\uc640 source \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \ubcd1\ud569\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectEntries":{"id":"utils/object/objectEntries","title":"objectEntries","description":"Object.entries()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectKeys":{"id":"utils/object/objectKeys","title":"objectKeys","description":"Object.keys()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectValues":{"id":"utils/object/objectValues","title":"objectValues","description":"Object.values()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/omit":{"id":"utils/object/omit","title":"omit","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub97c \uc0dd\ub7b5\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/pick":{"id":"utils/object/pick","title":"pick","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub85c \uad6c\uc131\ub41c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/countSubstringOccurrences":{"id":"utils/string/countSubstringOccurrences","title":"countSubstringOccurrences","description":"\ubb38\uc790\uc5f4\uc5d0\uc11c \ud2b9\uc815 \ud558\uc704 \ubb38\uc790\uc5f4\uc774 \uc5bc\ub9c8\ub098 \ubc18\ubcf5 \ub4f1\uc7a5\ud588\ub294\uc9c0 \ud69f\uc218\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractNumber":{"id":"utils/string/extractNumber","title":"extractNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \uc81c\uc678\ud55c \ubaa8\ub4e0 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/formatNumberWithCommas":{"id":"utils/string/formatNumberWithCommas","title":"formatNumberWithCommas","description":"\ubb38\uc790\uc5f4 \ub610\ub294 \uc22b\uc790\ub97c \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \ucc9c \ub2e8\uc704\ub85c (,)comma\ub97c \ucd94\uac00\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/formatPhoneNumber":{"id":"utils/string/formatPhoneNumber","title":"formatPhoneNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc804\ud654 \ubc88\ud638 \ud3ec\ub9f7\uc73c\ub85c -(hyphen)\uc744 \ub123\uc5b4\uc11c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/removeSpecialCharacters":{"id":"utils/string/removeSpecialCharacters","title":"removeSpecialCharacters","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \ud2b9\uc218 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/repeatCharacters":{"id":"utils/string/repeatCharacters","title":"repeatCharacters","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc758 \uac01 \ubb38\uc790\ub97c \uc8fc\uc5b4\uc9c4 \ubc18\ubcf5 \ud69f\uc218\ub9cc\ud07c \ubc18\ubcf5\ud574\uc11c \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/hasProperty":{"id":"utils/validator/hasProperty","title":"hasProperty","description":"\uac1d\uccb4\uac00 \uc9c0\uc815\ub41c \ud504\ub85c\ud37c\ud2f0\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ub9cc\uc57d, true\ub77c\uba74 \ud504\ub85c\ud37c\ud2f0\uc758 \ud0c0\uc785\uc774 \uc881\ud600\uc9d1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFuntion":{"id":"utils/validator/isFuntion","title":"isFunction","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ud568\uc218\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Function\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNotNullish":{"id":"utils/validator/isNotNullish","title":"isNotNullish","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uac00 \uc544\ub2cc\uc9c0 \uac80\uc0ac\ud558\uace0, \uc544\ub2c8\ub77c\uba74 \uc8fc\uc5b4\uc9c4 \uc778\uc790 \ud0c0\uc785 \uadf8\ub300\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNullish":{"id":"utils/validator/isNullish","title":"isNullish","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790 \ud0c0\uc785\uc774 undefined | null\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumber":{"id":"utils/validator/isNumber","title":"isNumber","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc22b\uc790\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 number\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidEmail":{"id":"utils/validator/isValidEmail","title":"isValidEmail","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc774\uba54\uc77c \ud615\uc2dd\uc744 \uc900\uc218\ud558\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPhoneNumberFormat":{"id":"utils/validator/isValidPhoneNumberFormat","title":"isValidPhoneNumberFormat","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 -(hyphen)\uc744 \ud3ec\ud568\ud55c \uc804\ud654\ubc88\ud638 \ud615\uc2dd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.76166b0b.js b/assets/js/935f2afb.76166b0b.js new file mode 100644 index 000000000..c29ee2b79 --- /dev/null +++ b/assets/js/935f2afb.76166b0b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduce","href":"/modern-kit/docs/introduce/","docId":"introduce/Introduce","unlisted":false},{"type":"category","label":"react","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"DebounceWrapper","href":"/modern-kit/docs/react/components/DebounceWrapper","docId":"react/components/DebounceWrapper","unlisted":false},{"type":"link","label":"InView","href":"/modern-kit/docs/react/components/InView","docId":"react/components/InView","unlisted":false},{"type":"link","label":"LazyImage","href":"/modern-kit/docs/react/components/LazyImage","docId":"react/components/LazyImage","unlisted":false},{"type":"link","label":"Portal","href":"/modern-kit/docs/react/components/Portal","docId":"react/components/Portal","unlisted":false},{"type":"link","label":"When","href":"/modern-kit/docs/react/components/When","docId":"react/components/When","unlisted":false}]},{"type":"category","label":"hooks","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"useAsyncPreservedCallback","href":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","docId":"react/hooks/useAsyncPreservedCallback","unlisted":false},{"type":"link","label":"useBlockPromiseMultipleClick","href":"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","docId":"react/hooks/useBlockPromiseMultipleClick","unlisted":false},{"type":"link","label":"useDebounce","href":"/modern-kit/docs/react/hooks/useDebounce","docId":"react/hooks/useDebounce","unlisted":false},{"type":"link","label":"useForceUpdate","href":"/modern-kit/docs/react/hooks/useForceUpdate","docId":"react/hooks/useForceUpdate","unlisted":false},{"type":"link","label":"useImageStatus","href":"/modern-kit/docs/react/hooks/useImageStatus","docId":"react/hooks/useImageStatus","unlisted":false},{"type":"link","label":"useIntersectionObserver","href":"/modern-kit/docs/react/hooks/useIntersectionObserver","docId":"react/hooks/useIntersectionObserver","unlisted":false},{"type":"link","label":"useInterval","href":"/modern-kit/docs/react/hooks/useInterval","docId":"react/hooks/useInterval","unlisted":false},{"type":"link","label":"useIsMounted","href":"/modern-kit/docs/react/hooks/useIsMounted","docId":"react/hooks/useIsMounted","unlisted":false},{"type":"link","label":"useIsomorphicLayoutEffect","href":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","docId":"react/hooks/useIsomorphicLayoutEffect","unlisted":false},{"type":"link","label":"useMediaQuery","href":"/modern-kit/docs/react/hooks/useMediaQuery","docId":"react/hooks/useMediaQuery","unlisted":false},{"type":"link","label":"useMergeRefs","href":"/modern-kit/docs/react/hooks/useMergeRefs","docId":"react/hooks/useMergeRefs","unlisted":false},{"type":"link","label":"useOnClickOutside","href":"/modern-kit/docs/react/hooks/useOnClickOutside","docId":"react/hooks/useOnClickOutside","unlisted":false},{"type":"link","label":"usePreservedCallback","href":"/modern-kit/docs/react/hooks/usePreservedCallback","docId":"react/hooks/usePreservedCallback","unlisted":false},{"type":"link","label":"usePreservedState","href":"/modern-kit/docs/react/hooks/usePreservedState","docId":"react/hooks/usePreservedState","unlisted":false},{"type":"link","label":"usePrevious","href":"/modern-kit/docs/react/hooks/usePrevious","docId":"react/hooks/usePrevious","unlisted":false},{"type":"link","label":"useResizeObserver","href":"/modern-kit/docs/react/hooks/useResizeObserver","docId":"react/hooks/useResizeObserver","unlisted":false},{"type":"link","label":"useTimeout","href":"/modern-kit/docs/react/hooks/useTimeout","docId":"react/hooks/useTimeout","unlisted":false},{"type":"link","label":"useToggle","href":"/modern-kit/docs/react/hooks/useToggle","docId":"react/hooks/useToggle","unlisted":false},{"type":"link","label":"useUnMount","href":"/modern-kit/docs/react/hooks/useUnmount","docId":"react/hooks/useUnmount","unlisted":false},{"type":"link","label":"useVisibilityChange","href":"/modern-kit/docs/react/hooks/useVisibilityChange","docId":"react/hooks/useVisibilityChange","unlisted":false},{"type":"link","label":"useWindowScrollTo","href":"/modern-kit/docs/react/hooks/useWindowScrollTo","docId":"react/hooks/useWindowScrollTo","unlisted":false},{"type":"link","label":"useWindowSize","href":"/modern-kit/docs/react/hooks/useWindowSize","docId":"react/hooks/useWindowSize","unlisted":false}]}]},{"type":"category","label":"utils","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"common","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"abRandom","href":"/modern-kit/docs/utils/common/abRandom","docId":"utils/common/abRandom","unlisted":false},{"type":"link","label":"asyncNoop","href":"/modern-kit/docs/utils/common/asyncNoop","docId":"utils/common/asyncNoop","unlisted":false},{"type":"link","label":"deepCopy","href":"/modern-kit/docs/utils/common/deepCopy","docId":"utils/common/deepCopy","unlisted":false},{"type":"link","label":"deepEqual","href":"/modern-kit/docs/utils/common/deepEqual","docId":"utils/common/deepEqual","unlisted":false},{"type":"link","label":"getUniqId","href":"/modern-kit/docs/utils/common/getUniqId","docId":"utils/common/getUniqId","unlisted":false},{"type":"link","label":"getUniqTime","href":"/modern-kit/docs/utils/common/getUniqTime","docId":"utils/common/getUniqTime","unlisted":false},{"type":"link","label":"getViewportSize","href":"/modern-kit/docs/utils/common/getViewportSize","docId":"utils/common/getViewportSize","unlisted":false},{"type":"link","label":"hexToRgba","href":"/modern-kit/docs/utils/common/hexToRgba","docId":"utils/common/hexToRgba","unlisted":false},{"type":"link","label":"noop","href":"/modern-kit/docs/utils/common/noop","docId":"utils/common/noop","unlisted":false},{"type":"link","label":"wrapInArray","href":"/modern-kit/docs/utils/common/wrapInArray","docId":"utils/common/wrapInArray","unlisted":false}]},{"type":"category","label":"device","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getOS","href":"/modern-kit/docs/utils/device/getOS","docId":"utils/device/getOS","unlisted":false},{"type":"link","label":"isClient","href":"/modern-kit/docs/utils/device/isClient","docId":"utils/device/isClient","unlisted":false},{"type":"link","label":"isMobile","href":"/modern-kit/docs/utils/device/isMobile","docId":"utils/device/isMobile","unlisted":false},{"type":"link","label":"isServer","href":"/modern-kit/docs/utils/device/isSever","docId":"utils/device/isSever","unlisted":false}]},{"type":"category","label":"object","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"deleteEmptyProperties","href":"/modern-kit/docs/utils/object/deleteEmptyProperties","docId":"utils/object/deleteEmptyProperties","unlisted":false},{"type":"link","label":"mergeProperties","href":"/modern-kit/docs/utils/object/mergeProperties","docId":"utils/object/mergeProperties","unlisted":false},{"type":"link","label":"objectEntries","href":"/modern-kit/docs/utils/object/objectEntries","docId":"utils/object/objectEntries","unlisted":false},{"type":"link","label":"objectKeys","href":"/modern-kit/docs/utils/object/objectKeys","docId":"utils/object/objectKeys","unlisted":false},{"type":"link","label":"objectValues","href":"/modern-kit/docs/utils/object/objectValues","docId":"utils/object/objectValues","unlisted":false},{"type":"link","label":"omit","href":"/modern-kit/docs/utils/object/omit","docId":"utils/object/omit","unlisted":false},{"type":"link","label":"pick","href":"/modern-kit/docs/utils/object/pick","docId":"utils/object/pick","unlisted":false}]},{"type":"category","label":"string","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"countSubstringOccurrences","href":"/modern-kit/docs/utils/string/countSubstringOccurrences","docId":"utils/string/countSubstringOccurrences","unlisted":false},{"type":"link","label":"extractNumber","href":"/modern-kit/docs/utils/string/extractNumber","docId":"utils/string/extractNumber","unlisted":false},{"type":"link","label":"formatNumberWithCommas","href":"/modern-kit/docs/utils/string/formatNumberWithCommas","docId":"utils/string/formatNumberWithCommas","unlisted":false},{"type":"link","label":"formatPhoneNumber","href":"/modern-kit/docs/utils/string/formatPhoneNumber","docId":"utils/string/formatPhoneNumber","unlisted":false},{"type":"link","label":"removeSpecialCharacters","href":"/modern-kit/docs/utils/string/removeSpecialCharacters","docId":"utils/string/removeSpecialCharacters","unlisted":false},{"type":"link","label":"repeatCharacters","href":"/modern-kit/docs/utils/string/repeatCharacters","docId":"utils/string/repeatCharacters","unlisted":false}]},{"type":"category","label":"validator","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"hasProperty","href":"/modern-kit/docs/utils/validator/hasProperty","docId":"utils/validator/hasProperty","unlisted":false},{"type":"link","label":"isFunction","href":"/modern-kit/docs/utils/validator/isFuntion","docId":"utils/validator/isFuntion","unlisted":false},{"type":"link","label":"isNotNullish","href":"/modern-kit/docs/utils/validator/isNotNullish","docId":"utils/validator/isNotNullish","unlisted":false},{"type":"link","label":"isNullish","href":"/modern-kit/docs/utils/validator/isNullish","docId":"utils/validator/isNullish","unlisted":false},{"type":"link","label":"isNumber","href":"/modern-kit/docs/utils/validator/isNumber","docId":"utils/validator/isNumber","unlisted":false},{"type":"link","label":"isValidEmail","href":"/modern-kit/docs/utils/validator/isValidEmail","docId":"utils/validator/isValidEmail","unlisted":false},{"type":"link","label":"isValidPhoneNumberFormat","href":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","docId":"utils/validator/isValidPhoneNumberFormat","unlisted":false}]}]}]},"docs":{"introduce/Introduce":{"id":"introduce/Introduce","title":"\uc18c\uac1c","description":"modern-kit\ub294 \uc720\uc6a9\ud55c \ub9ac\uc561\ud2b8 UI \ucef4\ud3ec\ub10c\ud2b8, \ub9ac\uc561\ud2b8 \ucee4\uc2a4\ud140 \ud6c5 \ubc0f \ub2e4\uc591\ud55c \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\ub97c \uc81c\uacf5\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/DebounceWrapper":{"id":"react/components/DebounceWrapper","title":"DebounceWrapper","description":"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/InView":{"id":"react/components/InView","title":"InView","description":"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/LazyImage":{"id":"react/components/LazyImage","title":"LazyImage","description":"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Portal":{"id":"react/components/Portal","title":"Portal","description":"Portal \ucef4\ud3ec\ub10c\ud2b8\ub294 React.createPortal\uc744 \uc0ac\uc6a9\ud574 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 DOM \uacc4\uce35 \uad6c\uc870 \uc678\ubd80\uc758 DOM \ub178\ub4dc\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/When":{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useAsyncPreservedCallback":{"id":"react/hooks/useAsyncPreservedCallback","title":"useAsyncPreservedCallback","description":"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useBlockPromiseMultipleClick":{"id":"react/hooks/useBlockPromiseMultipleClick","title":"useBlockPromiseMultipleClick","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebounce":{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useForceUpdate":{"id":"react/hooks/useForceUpdate","title":"useForceUpdate","description":"\ubc18\ud658\ub41c \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba74 \uac15\uc81c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1 \uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useImageStatus":{"id":"react/hooks/useImageStatus","title":"useImageStatus","description":"\ubc18\ud658\ub41c ref\ub97c ` \ud0dc\uadf8\uc5d0 \ud560\ub2f9\ud558\uba74 \uc774\ubbf8\uc9c0 \ub85c\ub4dc\ud558\ub294 \uacfc\uc815\uc5d0\uc11c pending, loading, complete, error` \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIntersectionObserver":{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub418\ub294 \uc2dc\uc810\uc5d0 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useInterval":{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsMounted":{"id":"react/hooks/useIsMounted","title":"useIsMounted","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\ub294\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsomorphicLayoutEffect":{"id":"react/hooks/useIsomorphicLayoutEffect","title":"useIsomorphicLayoutEffect","description":"useIsomorphicLayoutEffect\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1 \ud658\uacbd\uc5d0\uc11c\ub3c4 \ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \ubcf4\uc7a5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMediaQuery":{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"Resize \uc2dc\uc5d0\ub3c4 \ub3d9\uc791\ud558\uba70, \ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMergeRefs":{"id":"react/hooks/useMergeRefs","title":"useMergeRefs","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uc5ec\ub7ec \uac1c\uc758 ref\ub97c \ud558\ub098\ub85c \ubcd1\ud569\ud560 \ub54c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useOnClickOutside":{"id":"react/hooks/useOnClickOutside","title":"useOnClickOutside","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8 \uc678\ubd80 \uc694\uc18c\ub97c \ud074\ub9ad \ud560 \uacbd\uc6b0 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedCallback":{"id":"react/hooks/usePreservedCallback","title":"usePreservedCallback","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\ub97c \ubcf4\uc874\ud558\uace0 \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedState":{"id":"react/hooks/usePreservedState","title":"usePreservedState","description":"comparator\ub85c \ube44\uad50\ud588\uc744 \ub54c \uac12\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePrevious":{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useResizeObserver":{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useTimeout":{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useToggle":{"id":"react/hooks/useToggle","title":"useToggle","description":"boolean \ud0c0\uc785\uc758 state\ub97c Toggle\ub85c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUnmount":{"id":"react/hooks/useUnmount","title":"useUnMount","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVisibilityChange":{"id":"react/hooks/useVisibilityChange","title":"useVisibilityChange","description":"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowScrollTo":{"id":"react/hooks/useWindowScrollTo","title":"useWindowScrollTo","description":"window.scrollTo()\ub97c \ud3b8\ud558\uac8c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowSize":{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/abRandom":{"id":"utils/common/abRandom","title":"abRandom","description":"50% \ud655\ub960\ub85c 0\ub610\ub294 1\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/asyncNoop":{"id":"utils/common/asyncNoop","title":"asyncNoop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, Promise\ub97c \ubc18\ud658\ud558\ub294 async \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepCopy":{"id":"utils/common/deepCopy","title":"deepCopy","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uac12\uc744 \uae4a\uc740 \ubcf5\uc0ac\ub97c \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepEqual":{"id":"utils/common/deepEqual","title":"deepEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqId":{"id":"utils/common/getUniqId","title":"getUniqId","description":"\uc720\ub2c8\ud06c\ud55c \uc544\uc774\ub514\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqTime":{"id":"utils/common/getUniqTime","title":"getUniqTime","description":"\uae30\ubcf8\uc801\uc73c\ub85c new Date().getTime() \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc774\uc9c0\ub9cc, \ub3d9\uc77c \uc2dc\uac04\uc5d0 \uc5ec\ub7ec\ubc88 \ud638\ucd9c \ud560 \uacbd\uc6b0 \uc720\ub2c8\ud06c \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getViewportSize":{"id":"utils/common/getViewportSize","title":"getViewportSize","description":"\ud604\uc7ac Viewport Size\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/hexToRgba":{"id":"utils/common/hexToRgba","title":"hexToRgba","description":"16\uc9c4\uc218 \uc0c9\uc0c1 \ucf54\ub4dc(Hex)\ub97c RGB\ud615\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. (HEX -> RGB)","sidebar":"tutorialSidebar"},"utils/common/noop":{"id":"utils/common/noop","title":"noop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, undefined\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/wrapInArray":{"id":"utils/common/wrapInArray","title":"wrapInArray","description":"\ubc30\uc5f4\uc774 \uc544\ub2c8\ub77c\uba74 \ub798\ud551\ub41c \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\uace0, \ubc30\uc5f4\uc774\ub77c\uba74 \ub798\ud551\ud558\uc9c0 \uc54a\uace0 \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/getOS":{"id":"utils/device/getOS","title":"getOS","description":"userAgent\ub97c \uae30\ubc18\uc73c\ub85c OS \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isClient":{"id":"utils/device/isClient","title":"isClient","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isMobile":{"id":"utils/device/isMobile","title":"isMobile","description":"\ubaa8\ubc14\uc77c \ud658\uacbd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isSever":{"id":"utils/device/isSever","title":"isServer","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \uc11c\ubc84(Node.js)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/deleteEmptyProperties":{"id":"utils/object/deleteEmptyProperties","title":"deleteEmptyProperties","description":"\uac1d\uccb4\uc758 \uc911\ucca9 \uac1d\uccb4/\ubc30\uc5f4\uc744 \ud3ec\ud568\ud55c \ubaa8\ub4e0 \ud504\ub85c\ud37c\ud2f0\ub97c \uc21c\ud68c\ud558\uba74\uc11c \uac12\uc774 \uc544\ub798 \ub098\uc5f4\ud55c \ube48 \uac12\ub4e4 \uc911 \ud558\ub098\ub77c\uba74, \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0\ub4e4\uc744 \uc81c\uac70\ud55c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mergeProperties":{"id":"utils/object/mergeProperties","title":"mergeProperties","description":"\uae30\uc900\uc774 \ub418\ub294 target \uac1d\uccb4\uc640 source \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \ubcd1\ud569\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectEntries":{"id":"utils/object/objectEntries","title":"objectEntries","description":"Object.entries()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectKeys":{"id":"utils/object/objectKeys","title":"objectKeys","description":"Object.keys()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectValues":{"id":"utils/object/objectValues","title":"objectValues","description":"Object.values()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/omit":{"id":"utils/object/omit","title":"omit","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub97c \uc0dd\ub7b5\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/pick":{"id":"utils/object/pick","title":"pick","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub85c \uad6c\uc131\ub41c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/countSubstringOccurrences":{"id":"utils/string/countSubstringOccurrences","title":"countSubstringOccurrences","description":"\ubb38\uc790\uc5f4\uc5d0\uc11c \ud2b9\uc815 \ud558\uc704 \ubb38\uc790\uc5f4\uc774 \uc5bc\ub9c8\ub098 \ubc18\ubcf5 \ub4f1\uc7a5\ud588\ub294\uc9c0 \ud69f\uc218\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractNumber":{"id":"utils/string/extractNumber","title":"extractNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \uc81c\uc678\ud55c \ubaa8\ub4e0 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/formatNumberWithCommas":{"id":"utils/string/formatNumberWithCommas","title":"formatNumberWithCommas","description":"\ubb38\uc790\uc5f4 \ub610\ub294 \uc22b\uc790\ub97c \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \ucc9c \ub2e8\uc704\ub85c (,)comma\ub97c \ucd94\uac00\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/formatPhoneNumber":{"id":"utils/string/formatPhoneNumber","title":"formatPhoneNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc804\ud654 \ubc88\ud638 \ud3ec\ub9f7\uc73c\ub85c -(hyphen)\uc744 \ub123\uc5b4\uc11c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/removeSpecialCharacters":{"id":"utils/string/removeSpecialCharacters","title":"removeSpecialCharacters","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \ud2b9\uc218 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/repeatCharacters":{"id":"utils/string/repeatCharacters","title":"repeatCharacters","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc758 \uac01 \ubb38\uc790\ub97c \uc8fc\uc5b4\uc9c4 \ubc18\ubcf5 \ud69f\uc218\ub9cc\ud07c \ubc18\ubcf5\ud574\uc11c \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/hasProperty":{"id":"utils/validator/hasProperty","title":"hasProperty","description":"\uac1d\uccb4\uac00 \uc9c0\uc815\ub41c \ud504\ub85c\ud37c\ud2f0\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ub9cc\uc57d, true\ub77c\uba74 \ud504\ub85c\ud37c\ud2f0\uc758 \ud0c0\uc785\uc774 \uc881\ud600\uc9d1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFuntion":{"id":"utils/validator/isFuntion","title":"isFunction","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ud568\uc218\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Function\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNotNullish":{"id":"utils/validator/isNotNullish","title":"isNotNullish","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uac00 \uc544\ub2cc\uc9c0 \uac80\uc0ac\ud558\uace0, \uc544\ub2c8\ub77c\uba74 \uc8fc\uc5b4\uc9c4 \uc778\uc790 \ud0c0\uc785 \uadf8\ub300\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNullish":{"id":"utils/validator/isNullish","title":"isNullish","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790 \ud0c0\uc785\uc774 undefined | null\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumber":{"id":"utils/validator/isNumber","title":"isNumber","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc22b\uc790\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 number\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidEmail":{"id":"utils/validator/isValidEmail","title":"isValidEmail","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc774\uba54\uc77c \ud615\uc2dd\uc744 \uc900\uc218\ud558\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPhoneNumberFormat":{"id":"utils/validator/isValidPhoneNumberFormat","title":"isValidPhoneNumberFormat","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 -(hyphen)\uc744 \ud3ec\ud568\ud55c \uc804\ud654\ubc88\ud638 \ud615\uc2dd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.244eaa74.js b/assets/js/9be130a4.244eaa74.js new file mode 100644 index 000000000..bd10e5831 --- /dev/null +++ b/assets/js/9be130a4.244eaa74.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5337],{6825:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>p,frontMatter:()=>s,metadata:()=>a,toc:()=>f});var r=n(1986),o=n(7355),i=n(5474),c=n(7800);const s={},u="usePrevious",a={id:"react/hooks/usePrevious",title:"usePrevious",description:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePrevious.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"},next:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"}},l={},d=()=>{const e={button:"button",div:"div",...(0,o.a)()},[t,n]=(0,c.useState)(0),s=(0,i.D9)(t);return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:["Current Count is - ",t]}),(0,r.jsxs)(e.div,{children:["Previous Count is - ",s]}),(0,r.jsx)(e.button,{onClick:()=>{n(t+1)},children:"Increment"})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function v(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"useprevious",children:"usePrevious"}),"\n",(0,r.jsx)(t.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>B,Mm:()=>Y,ac:()=>q,df:()=>$,iP:()=>J,nA:()=>V,uM:()=>I,wY:()=>A,yU:()=>G});var r=n(7800),o=n(1986),i=(n(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,v=Object.prototype.toString,p="[object Null]",h="[object Undefined]",m=u?u.toStringTag:void 0;var b="[object Symbol]",g=/\s/,y=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,k=/^0o[0-7]+$/i,C=parseInt;function E(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?h:p:m&&m in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return v.call(e)}(e)}(e)==b}(e))return j;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(y,""):e}(e);var n=O.test(e);return n||k.test(e)?C(e.slice(2),n?2:8):w.test(e)?j:+e}var P=function(){return s.Date.now()},M=Math.max,S=Math.min;const R=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},T=(e,t,n={})=>{const o=R(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function v(t){var n=r,i=o;return r=o=void 0,a=t,c=e.apply(i,n)}function p(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function h(){var e=P();if(p(e))return m(e);s=setTimeout(h,function(e){var n=t-(e-u);return d?S(n,i-(e-a)):n}(e))}function m(e){return s=void 0,f&&r?v(e):(r=o=void 0,c)}function b(){var e=P(),n=p(e);if(r=arguments,o=this,u=e,n){if(void 0===s)return function(e){return a=e,s=setTimeout(h,t),l?v(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(h,t),v(u)}return void 0===s&&(s=setTimeout(h,t)),c}return t=E(t)||0,x(n)&&(l=!!n.leading,i=(d="maxWait"in n)?M(E(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),b.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},b.flush=function(){return void 0===s?c:m(P())},b}(o,t,n)),[o,t,n]);return(e=>{const t=R(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},I=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=T(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function N(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,D=()=>{},U=()=>!L(),F=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=R(null!=e?e:D),u=R((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return R((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},W=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),$=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=N(e,["action","calledOnce","threshold","root","rootMargin"]),a=F({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:W(t,a)},u,{children:e.children}))}));$.displayName="InView";const A=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:u}=e,a=N(e,["src","style","threshold","root","rootMargin"]);const l=F({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:W(t,l),style:d}))}));A.displayName="LazyImage";const H=U()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const V=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},Y=()=>{const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>z(void 0,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}},Z=e=>!!U()&&window.matchMedia(e).matches,q=e=>{const[t,n]=(0,r.useState)(Z(e)),o=(0,r.useCallback)((()=>{n(Z(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},B=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},G=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=R(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},J=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=T(c,n),u=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return H((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.8267ca4b.js b/assets/js/9be130a4.8267ca4b.js deleted file mode 100644 index 989e5acf5..000000000 --- a/assets/js/9be130a4.8267ca4b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5337],{6825:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>p,frontMatter:()=>c,metadata:()=>a,toc:()=>f});var r=n(1986),o=n(7355),i=n(5474),s=n(7800);const c={},u="usePrevious",a={id:"react/hooks/usePrevious",title:"usePrevious",description:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePrevious.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"},next:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"}},l={},d=()=>{const e={button:"button",div:"div",...(0,o.a)()},[t,n]=(0,s.useState)(0),c=(0,i.D9)(t);return(0,r.jsxs)(e.div,{children:[(0,r.jsxs)(e.div,{children:["Current Count is - ",t]}),(0,r.jsxs)(e.div,{children:["Previous Count is - ",c]}),(0,r.jsx)(e.button,{onClick:()=>{n(t+1)},children:"Increment"})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function v(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"useprevious",children:"usePrevious"}),"\n",(0,r.jsx)(t.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(v,{...e})}):v(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var r=n(7800);const o={},i=r.createContext(o);function s(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>q,ac:()=>Z,df:()=>W,iP:()=>G,nA:()=>H,uM:()=>I,wY:()=>$,yU:()=>B});var r=n(7800),o=n(1986),i=(n(7143),"object"==typeof global&&global&&global.Object===Object&&global),s="object"==typeof self&&self&&self.Object===Object&&self,c=i||s||Function("return this")(),u=c.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,v=Object.prototype.toString,p="[object Null]",h="[object Undefined]",b=u?u.toStringTag:void 0;var m="[object Symbol]",g=/\s/,y=/^\s+/;function x(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,k=/^0o[0-7]+$/i,C=parseInt;function E(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?h:p:b&&b in Object(e)?function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return v.call(e)}(e)}(e)==m}(e))return j;if(x(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=x(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(y,""):e}(e);var n=O.test(e);return n||k.test(e)?C(e.slice(2),n?2:8):w.test(e)?j:+e}var P=function(){return c.Date.now()},S=Math.max,M=Math.min;const T=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},R=(e,t,n={})=>{const o=T(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,s,c,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function v(t){var n=r,i=o;return r=o=void 0,a=t,s=e.apply(i,n)}function p(e){var n=e-u;return void 0===u||n>=t||n<0||d&&e-a>=i}function h(){var e=P();if(p(e))return b(e);c=setTimeout(h,function(e){var n=t-(e-u);return d?M(n,i-(e-a)):n}(e))}function b(e){return c=void 0,f&&r?v(e):(r=o=void 0,s)}function m(){var e=P(),n=p(e);if(r=arguments,o=this,u=e,n){if(void 0===c)return function(e){return a=e,c=setTimeout(h,t),l?v(e):s}(u);if(d)return clearTimeout(c),c=setTimeout(h,t),v(u)}return void 0===c&&(c=setTimeout(h,t)),s}return t=E(t)||0,x(n)&&(l=!!n.leading,i=(d="maxWait"in n)?S(E(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==c&&clearTimeout(c),a=0,r=u=o=c=void 0},m.flush=function(){return void 0===c?s:b(P())},m}(o,t,n)),[o,t,n]);return(e=>{const t=T(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},I=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),s=R(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:s})};function z(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,D=()=>{},L=()=>!N(),U=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const s=(0,r.useRef)(null),c=T(null!=e?e:D),u=T((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;c&&c(e),t&&n.unobserve(r)}}));return T((e=>{s.current&&s.current.disconnect(),s.current=new IntersectionObserver(u,{root:n,threshold:o,rootMargin:i}),e&&s.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),W=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:s,rootMargin:c}=e,u=z(e,["action","calledOnce","threshold","root","rootMargin"]),a=U({action:n,calledOnce:r,threshold:i,root:s,rootMargin:c});return(0,o.jsx)("div",Object.assign({ref:F(t,a)},u,{children:e.children}))})),$=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:s,root:c,rootMargin:u}=e,a=z(e,["src","style","threshold","root","rootMargin"]);const l=U({action:e=>{e.target.src=n},calledOnce:!0,threshold:s,root:c,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:F(t,l),style:d}))})),A=L()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const H=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},Y=e=>!!L()&&window.matchMedia(e).matches,Z=e=>{const[t,n]=(0,r.useState)(Y(e)),o=(0,r.useCallback)((()=>{n(Y(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},q=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},B=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=T(e),s=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(s);return t.observe(e),()=>{t.unobserve(e)}}),[s]),{ref:o,contentRect:t}},G=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),s=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),c=R(s,n),u=(0,r.useMemo)((()=>t?c:s),[s,t,c]);return A((()=>(s(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/b35b1276.3a974048.js b/assets/js/b35b1276.3a974048.js new file mode 100644 index 000000000..6f2f2ccb3 --- /dev/null +++ b/assets/js/b35b1276.3a974048.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1813],{1213:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>u,toc:()=>f});var r=t(1986),o=t(7355),c=t(7800),i=t(5474);const s={},a="When",u={id:"react/components/When",title:"When",description:"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/When.mdx",sourceDirName:"react/components",slug:"/react/components/When",permalink:"/modern-kit/docs/react/components/When",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"},next:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"}},l={},d=()=>{const e={button:"button",h1:"h1",...(0,o.a)()},[n,t]=(0,c.useState)(!1);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.button,{onClick:()=>t(!n),children:"Toggle Button"}),(0,r.jsx)(i.nA,{condition:n,children:(0,r.jsx)(e.h1,{children:"Render"})})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"when",children:"When"}),"\n",(0,r.jsxs)(n.p,{children:["condition prop\uc774 ",(0,r.jsx)(n.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,r.jsx)(n.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:["condition prop\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type Condition = boolean | ((...args: any[]) => boolean);\n\ninterface WhenProps {\n condition: Condition;\n}\n\nconst When: ({ children, condition }: PropsWithChildren) => JSX.Element | null\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { When } from '@modern-kit/react';\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n \n

Render

\n \n \n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>i});var r=t(7800);const o={},c=r.createContext(o);function i(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(c.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>Y,Mm:()=>J,ac:()=>X,df:()=>U,iP:()=>q,nA:()=>H,uM:()=>T,wY:()=>$,yU:()=>Z});var r=t(7800),o=t(1986),c=(t(286),"object"==typeof global&&global&&global.Object===Object&&global),i="object"==typeof self&&self&&self.Object===Object&&self,s=c||i||Function("return this")(),a=s.Symbol,u=Object.prototype,l=u.hasOwnProperty,d=u.toString,f=a?a.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",v="[object Undefined]",m=a?a.toStringTag:void 0;var b="[object Symbol]",g=/\s/,y=/^\s+/;function x(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,k=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:p:m&&m in Object(e)?function(e){var n=l.call(e,f),t=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(n?e[f]=t:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==b}(e))return j;if(x(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=x(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&g.test(e.charAt(n)););return n}(e)+1).replace(y,""):e}(e);var t=O.test(e);return t||E.test(e)?k(e.slice(2),t?2:8):w.test(e)?j:+e}var S=function(){return s.Date.now()},C=Math.max,W=Math.min;const P=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},R=(e,n,t={})=>{const o=P(e),c=(0,r.useMemo)((()=>function(e,n,t){var r,o,c,i,s,a,u=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(n){var t=r,c=o;return r=o=void 0,u=n,i=e.apply(c,t)}function p(e){var t=e-a;return void 0===a||t>=n||t<0||d&&e-u>=c}function v(){var e=S();if(p(e))return m(e);s=setTimeout(v,function(e){var t=n-(e-a);return d?W(t,c-(e-u)):t}(e))}function m(e){return s=void 0,f&&r?h(e):(r=o=void 0,i)}function b(){var e=S(),t=p(e);if(r=arguments,o=this,a=e,t){if(void 0===s)return function(e){return u=e,s=setTimeout(v,n),l?h(e):i}(a);if(d)return clearTimeout(s),s=setTimeout(v,n),h(a)}return void 0===s&&(s=setTimeout(v,n)),i}return n=M(n)||0,x(t)&&(l=!!t.leading,c=(d="maxWait"in t)?C(M(t.maxWait)||0,n):c,f="trailing"in t?!!t.trailing:f),b.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=a=o=s=void 0},b.flush=function(){return void 0===s?i:m(S())},b}(o,n,t)),[o,n,t]);return(e=>{const n=P(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>c.cancel())),c},T=({children:e,capture:n,wait:t,options:o})=>{const c=r.Children.only(e),i=R(((...e)=>{const t=null==c?void 0:c.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(c,{[n]:i})};function I(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,z=()=>{},A=()=>!L(),D=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:c="0px 0px 0px 0px"})=>{const i=(0,r.useRef)(null),s=P(null!=e?e:z),a=P((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),n&&t.unobserve(r)}}));return P((e=>{i.current&&i.current.disconnect(),i.current=new IntersectionObserver(a,{root:t,threshold:o,rootMargin:c}),e&&i.current.observe(e)}))},F=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),U=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:c,root:i,rootMargin:s}=e,a=I(e,["action","calledOnce","threshold","root","rootMargin"]),u=D({action:t,calledOnce:r,threshold:c,root:i,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:F(n,u)},a,{children:e.children}))}));U.displayName="InView";const $=(0,r.forwardRef)(((e,n)=>{var{src:t,style:c,threshold:i,root:s,rootMargin:a}=e,u=I(e,["src","style","threshold","root","rootMargin"]);const l=D({action:e=>{e.target.src=t},calledOnce:!0,threshold:i,root:s,rootMargin:a}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},c)),[c]);return(0,o.jsx)("img",Object.assign({},u,{ref:F(n,l),style:d}))}));$.displayName="LazyImage";const B=A()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const H=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},J=()=>{const[e,n]=(0,r.useState)(!1),t=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>N(void 0,void 0,void 0,(function*(){t.current||(t.current=!0,n(!0),yield e(),t.current=!1,n(!1))}))}},V=e=>!!A()&&window.matchMedia(e).matches,X=e=>{const[n,t]=(0,r.useState)(V(e)),o=(0,r.useCallback)((()=>{t(V(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},Y=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},Z=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),c=P(e),i=(0,r.useCallback)((([e])=>{e&&(c(e),t(e.contentRect))}),[c]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(i);return n.observe(e),()=>{n.unobserve(e)}}),[i]),{ref:o,contentRect:n}},q=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,c]=(0,r.useState)({width:null,height:null}),i=(0,r.useCallback)((()=>{c({width:window.innerWidth,height:window.innerHeight})}),[]),s=R(i,t),a=(0,r.useMemo)((()=>n?s:i),[i,n,s]);return B((()=>(i(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/b35b1276.932bab46.js b/assets/js/b35b1276.932bab46.js deleted file mode 100644 index b53ed62c9..000000000 --- a/assets/js/b35b1276.932bab46.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1813],{1213:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>u,toc:()=>f});var r=t(1986),o=t(7355),c=t(7800),i=t(5474);const s={},a="When",u={id:"react/components/When",title:"When",description:"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/When.mdx",sourceDirName:"react/components",slug:"/react/components/When",permalink:"/modern-kit/docs/react/components/When",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"},next:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"}},l={},d=()=>{const e={button:"button",h1:"h1",...(0,o.a)()},[n,t]=(0,c.useState)(!1);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.button,{onClick:()=>t(!n),children:"Toggle Button"}),(0,r.jsx)(i.nA,{condition:n,children:(0,r.jsx)(e.h1,{children:"Render"})})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function h(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"when",children:"When"}),"\n",(0,r.jsxs)(n.p,{children:["condition prop\uc774 ",(0,r.jsx)(n.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,r.jsx)(n.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(n.p,{children:["condition prop\uc73c\ub85c ",(0,r.jsx)(n.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"type Condition = boolean | ((...args: any[]) => boolean);\n\ninterface WhenProps {\n condition: Condition;\n}\n\nconst When: ({ children, condition }: PropsWithChildren) => JSX.Element | null\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { When } from '@modern-kit/react';\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n \n

Render

\n \n \n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>i});var r=t(7800);const o={},c=r.createContext(o);function i(e){const n=r.useContext(c);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(c.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>X,ac:()=>J,df:()=>F,iP:()=>Z,nA:()=>B,uM:()=>T,wY:()=>U,yU:()=>Y});var r=t(7800),o=t(1986),c=(t(7143),"object"==typeof global&&global&&global.Object===Object&&global),i="object"==typeof self&&self&&self.Object===Object&&self,s=c||i||Function("return this")(),a=s.Symbol,u=Object.prototype,l=u.hasOwnProperty,d=u.toString,f=a?a.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",b="[object Undefined]",v=a?a.toStringTag:void 0;var m="[object Symbol]",g=/\s/,y=/^\s+/;function x(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var j=NaN,w=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,k=parseInt;function S(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?b:p:v&&v in Object(e)?function(e){var n=l.call(e,f),t=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(n?e[f]=t:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==m}(e))return j;if(x(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=x(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&g.test(e.charAt(n)););return n}(e)+1).replace(y,""):e}(e);var t=O.test(e);return t||E.test(e)?k(e.slice(2),t?2:8):w.test(e)?j:+e}var M=function(){return s.Date.now()},C=Math.max,W=Math.min;const P=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},R=(e,n,t={})=>{const o=P(e),c=(0,r.useMemo)((()=>function(e,n,t){var r,o,c,i,s,a,u=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(n){var t=r,c=o;return r=o=void 0,u=n,i=e.apply(c,t)}function p(e){var t=e-a;return void 0===a||t>=n||t<0||d&&e-u>=c}function b(){var e=M();if(p(e))return v(e);s=setTimeout(b,function(e){var t=n-(e-a);return d?W(t,c-(e-u)):t}(e))}function v(e){return s=void 0,f&&r?h(e):(r=o=void 0,i)}function m(){var e=M(),t=p(e);if(r=arguments,o=this,a=e,t){if(void 0===s)return function(e){return u=e,s=setTimeout(b,n),l?h(e):i}(a);if(d)return clearTimeout(s),s=setTimeout(b,n),h(a)}return void 0===s&&(s=setTimeout(b,n)),i}return n=S(n)||0,x(t)&&(l=!!t.leading,c=(d="maxWait"in t)?C(S(t.maxWait)||0,n):c,f="trailing"in t?!!t.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),u=0,r=a=o=s=void 0},m.flush=function(){return void 0===s?i:v(M())},m}(o,n,t)),[o,n,t]);return(e=>{const n=P(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>c.cancel())),c},T=({children:e,capture:n,wait:t,options:o})=>{const c=r.Children.only(e),i=R(((...e)=>{const t=null==c?void 0:c.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(c,{[n]:i})};function I(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,A=()=>{},L=()=>!N(),z=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:c="0px 0px 0px 0px"})=>{const i=(0,r.useRef)(null),s=P(null!=e?e:A),a=P((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),n&&t.unobserve(r)}}));return P((e=>{i.current&&i.current.disconnect(),i.current=new IntersectionObserver(a,{root:t,threshold:o,rootMargin:c}),e&&i.current.observe(e)}))},D=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),F=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:c,root:i,rootMargin:s}=e,a=I(e,["action","calledOnce","threshold","root","rootMargin"]),u=z({action:t,calledOnce:r,threshold:c,root:i,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:D(n,u)},a,{children:e.children}))})),U=(0,r.forwardRef)(((e,n)=>{var{src:t,style:c,threshold:i,root:s,rootMargin:a}=e,u=I(e,["src","style","threshold","root","rootMargin"]);const l=z({action:e=>{e.target.src=t},calledOnce:!0,threshold:i,root:s,rootMargin:a}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},c)),[c]);return(0,o.jsx)("img",Object.assign({},u,{ref:D(n,l),style:d}))})),$=L()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const B=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},H=e=>!!L()&&window.matchMedia(e).matches,J=e=>{const[n,t]=(0,r.useState)(H(e)),o=(0,r.useCallback)((()=>{t(H(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},X=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},Y=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),c=P(e),i=(0,r.useCallback)((([e])=>{e&&(c(e),t(e.contentRect))}),[c]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(i);return n.observe(e),()=>{n.unobserve(e)}}),[i]),{ref:o,contentRect:n}},Z=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,c]=(0,r.useState)({width:null,height:null}),i=(0,r.useCallback)((()=>{c({width:window.innerWidth,height:window.innerHeight})}),[]),s=R(i,t),a=(0,r.useMemo)((()=>n?s:i),[i,n,s]);return $((()=>(i(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.8c9a23f2.js b/assets/js/b3bf5b56.8c9a23f2.js new file mode 100644 index 000000000..3b9b0bfbd --- /dev/null +++ b/assets/js/b3bf5b56.8c9a23f2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1175],{4037:(e,n,t)=>{t.r(n),t.d(n,{DebounceExample:()=>f,DefaultExample:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>b,frontMatter:()=>s,metadata:()=>a,toc:()=>h});var r=t(1986),o=t(7355),i=t(5474),c=t(7800);const s={},u="useWindowSize",a={id:"react/hooks/useWindowSize",title:"useWindowSize",description:"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useWindowSize.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useWindowScrollTo",permalink:"/modern-kit/docs/react/hooks/useWindowScrollTo"},next:{title:"abRandom",permalink:"/modern-kit/docs/utils/common/abRandom"}},l={},d=()=>{const e={br:"br",div:"div",...(0,o.a)()},n=(0,i.iP)(),t=(0,c.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,r.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),"width: ",n.width,"px ",(0,r.jsx)(e.br,{}),"height: ",n.height,"px"]})},f=()=>{const e={br:"br",div:"div",...(0,o.a)()},n=(0,i.iP)({isDebounce:!0,wait:300}),t=(0,c.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,r.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),"width: ",n.width,"px ",(0,r.jsx)(e.br,{}),"height: ",n.height,"px"]})},h=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function p(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"usewindowsize",children:"useWindowSize"}),"\n",(0,r.jsxs)(n.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,r.jsx)(n.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"interface Size {\n width: number | null;\n height: number | null;\n}\n\ninterface useWindowSizeProps {\n isDebounce?: boolean; // debounce options, default: false\n wait?: number; // debounce delay time, default: 300\n}\n\nconst useWindowSize: (options?: useWindowSizeProps) => Size\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h3,{id:"debounce",children:"Debounce"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ isDebounce: true, wait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(f,{}),"\n",(0,r.jsx)("br",{})]})}function b(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>c});var r=t(7800);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>B,Mm:()=>Y,ac:()=>q,df:()=>F,iP:()=>J,nA:()=>V,uM:()=>P,wY:()=>$,yU:()=>G});var r=t(7800),o=t(1986),i=(t(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",b="[object Undefined]",w=u?u.toStringTag:void 0;var v="[object Symbol]",m=/\s/,g=/^\s+/;function x(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var y=NaN,j=/^[-+]0x[0-9a-f]+$/i,S=/^0b[01]+$/i,z=/^0o[0-7]+$/i,k=parseInt;function O(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?b:p:w&&w in Object(e)?function(e){var n=l.call(e,f),t=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(n?e[f]=t:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==v}(e))return y;if(x(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=x(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&m.test(e.charAt(n)););return n}(e)+1).replace(g,""):e}(e);var t=S.test(e);return t||z.test(e)?k(e.slice(2),t?2:8):j.test(e)?y:+e}var E=function(){return s.Date.now()},M=Math.max,W=Math.min;const D=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},C=(e,n,t={})=>{const o=D(e),i=(0,r.useMemo)((()=>function(e,n,t){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(n){var t=r,i=o;return r=o=void 0,a=n,c=e.apply(i,t)}function p(e){var t=e-u;return void 0===u||t>=n||t<0||d&&e-a>=i}function b(){var e=E();if(p(e))return w(e);s=setTimeout(b,function(e){var t=n-(e-u);return d?W(t,i-(e-a)):t}(e))}function w(e){return s=void 0,f&&r?h(e):(r=o=void 0,c)}function v(){var e=E(),t=p(e);if(r=arguments,o=this,u=e,t){if(void 0===s)return function(e){return a=e,s=setTimeout(b,n),l?h(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(b,n),h(u)}return void 0===s&&(s=setTimeout(b,n)),c}return n=O(n)||0,x(t)&&(l=!!t.leading,i=(d="maxWait"in t)?M(O(t.maxWait)||0,n):i,f="trailing"in t?!!t.trailing:f),v.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},v.flush=function(){return void 0===s?c:w(E())},v}(o,n,t)),[o,n,t]);return(e=>{const n=D(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>i.cancel())),i},P=({children:e,capture:n,wait:t,options:o})=>{const i=r.Children.only(e),c=C(((...e)=>{const t=null==i?void 0:i.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(i,{[n]:c})};function R(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,I=()=>{},L=()=>!N(),A=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=D(null!=e?e:I),u=D((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),n&&t.unobserve(r)}}));return D((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:t,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},U=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),F=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=R(e,["action","calledOnce","threshold","root","rootMargin"]),a=A({action:t,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:U(n,a)},u,{children:e.children}))}));F.displayName="InView";const $=(0,r.forwardRef)(((e,n)=>{var{src:t,style:i,threshold:c,root:s,rootMargin:u}=e,a=R(e,["src","style","threshold","root","rootMargin"]);const l=A({action:e=>{e.target.src=t},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:U(n,l),style:d}))}));$.displayName="LazyImage";const H=L()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const V=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},Y=()=>{const[e,n]=(0,r.useState)(!1),t=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>T(void 0,void 0,void 0,(function*(){t.current||(t.current=!0,n(!0),yield e(),t.current=!1,n(!1))}))}},Z=e=>!!L()&&window.matchMedia(e).matches,q=e=>{const[n,t]=(0,r.useState)(Z(e)),o=(0,r.useCallback)((()=>{t(Z(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},B=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},G=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=D(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),t(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(c);return n.observe(e),()=>{n.unobserve(e)}}),[c]),{ref:o,contentRect:n}},J=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=C(c,t),u=(0,r.useMemo)((()=>n?s:c),[c,n,s]);return H((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.d46aa213.js b/assets/js/b3bf5b56.d46aa213.js deleted file mode 100644 index ea647c9c0..000000000 --- a/assets/js/b3bf5b56.d46aa213.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1175],{4037:(e,n,t)=>{t.r(n),t.d(n,{DebounceExample:()=>f,DefaultExample:()=>d,assets:()=>l,contentTitle:()=>u,default:()=>b,frontMatter:()=>s,metadata:()=>a,toc:()=>h});var r=t(1986),o=t(7355),i=t(5474),c=t(7800);const s={},u="useWindowSize",a={id:"react/hooks/useWindowSize",title:"useWindowSize",description:"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useWindowSize.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useWindowScrollTo",permalink:"/modern-kit/docs/react/hooks/useWindowScrollTo"},next:{title:"abRandom",permalink:"/modern-kit/docs/utils/common/abRandom"}},l={},d=()=>{const e={br:"br",div:"div",...(0,o.a)()},n=(0,i.iP)(),t=(0,c.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,r.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),"width: ",n.width,"px ",(0,r.jsx)(e.br,{}),"height: ",n.height,"px"]})},f=()=>{const e={br:"br",div:"div",...(0,o.a)()},n=(0,i.iP)({isDebounce:!0,wait:300}),t=(0,c.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,r.jsxs)(e.div,{style:t,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),"width: ",n.width,"px ",(0,r.jsx)(e.br,{}),"height: ",n.height,"px"]})},h=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function p(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"usewindowsize",children:"useWindowSize"}),"\n",(0,r.jsxs)(n.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,r.jsx)(n.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"interface Size {\n width: number | null;\n height: number | null;\n}\n\ninterface useWindowSizeProps {\n isDebounce?: boolean; // debounce options, default: false\n wait?: number; // debounce delay time, default: 300\n}\n\nconst useWindowSize: (options?: useWindowSizeProps) => Size\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"default",children:"Default"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(d,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h3,{id:"debounce",children:"Debounce"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ isDebounce: true, wait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,r.jsx)(f,{}),"\n",(0,r.jsx)("br",{})]})}function b(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>c});var r=t(7800);const o={},i=r.createContext(o);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>q,ac:()=>Z,df:()=>U,iP:()=>G,nA:()=>H,uM:()=>P,wY:()=>F,yU:()=>B});var r=t(7800),o=t(1986),i=(t(7143),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),u=s.Symbol,a=Object.prototype,l=a.hasOwnProperty,d=a.toString,f=u?u.toStringTag:void 0,h=Object.prototype.toString,p="[object Null]",b="[object Undefined]",w=u?u.toStringTag:void 0;var m="[object Symbol]",v=/\s/,g=/^\s+/;function x(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var y=NaN,j=/^[-+]0x[0-9a-f]+$/i,S=/^0b[01]+$/i,z=/^0o[0-7]+$/i,O=parseInt;function k(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?b:p:w&&w in Object(e)?function(e){var n=l.call(e,f),t=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(n?e[f]=t:delete e[f]),o}(e):function(e){return h.call(e)}(e)}(e)==m}(e))return y;if(x(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=x(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&v.test(e.charAt(n)););return n}(e)+1).replace(g,""):e}(e);var t=S.test(e);return t||z.test(e)?O(e.slice(2),t?2:8):j.test(e)?y:+e}var E=function(){return s.Date.now()},M=Math.max,W=Math.min;const D=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),(0,r.useCallback)(((...e)=>n.current(...e)),[])},C=(e,n,t={})=>{const o=D(e),i=(0,r.useMemo)((()=>function(e,n,t){var r,o,i,c,s,u,a=0,l=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function h(n){var t=r,i=o;return r=o=void 0,a=n,c=e.apply(i,t)}function p(e){var t=e-u;return void 0===u||t>=n||t<0||d&&e-a>=i}function b(){var e=E();if(p(e))return w(e);s=setTimeout(b,function(e){var t=n-(e-u);return d?W(t,i-(e-a)):t}(e))}function w(e){return s=void 0,f&&r?h(e):(r=o=void 0,c)}function m(){var e=E(),t=p(e);if(r=arguments,o=this,u=e,t){if(void 0===s)return function(e){return a=e,s=setTimeout(b,n),l?h(e):c}(u);if(d)return clearTimeout(s),s=setTimeout(b,n),h(u)}return void 0===s&&(s=setTimeout(b,n)),c}return n=k(n)||0,x(t)&&(l=!!t.leading,i=(d="maxWait"in t)?M(k(t.maxWait)||0,n):i,f="trailing"in t?!!t.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=u=o=s=void 0},m.flush=function(){return void 0===s?c:w(E())},m}(o,n,t)),[o,n,t]);return(e=>{const n=D(e);(0,r.useEffect)((()=>()=>n()),[n])})((()=>i.cancel())),i},P=({children:e,capture:n,wait:t,options:o})=>{const i=r.Children.only(e),c=C(((...e)=>{const t=null==i?void 0:i.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,o);return(0,r.cloneElement)(i,{[n]:c})};function R(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,N=()=>{},I=()=>!T(),L=({action:e,calledOnce:n=!1,root:t=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=D(null!=e?e:N),u=D((([e],t)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),n&&t.unobserve(r)}}));return D((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(u,{root:t,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},A=(...e)=>(0,r.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),U=(0,r.forwardRef)(((e,n)=>{const{action:t,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,u=R(e,["action","calledOnce","threshold","root","rootMargin"]),a=L({action:t,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:A(n,a)},u,{children:e.children}))})),F=(0,r.forwardRef)(((e,n)=>{var{src:t,style:i,threshold:c,root:s,rootMargin:u}=e,a=R(e,["src","style","threshold","root","rootMargin"]);const l=L({action:e=>{e.target.src=t},calledOnce:!0,threshold:c,root:s,rootMargin:u}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:A(n,l),style:d}))})),$=I()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const H=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,o.jsx)(r.Fragment,{children:e}):null},Y=e=>!!I()&&window.matchMedia(e).matches,Z=e=>{const[n,t]=(0,r.useState)(Y(e)),o=(0,r.useCallback)((()=>{t(Y(e))}),[e]);return(0,r.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)}),[e,o]),{isMatch:n}},q=e=>{const n=(0,r.useRef)(e);return(0,r.useEffect)((()=>{n.current=e}),[e]),n.current},B=e=>{const[n,t]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=D(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),t(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(c);return n.observe(e),()=>{n.unobserve(e)}}),[c]),{ref:o,contentRect:n}},G=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=C(c,t),u=(0,r.useMemo)((()=>n?s:c),[c,n,s]);return $((()=>(c(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.62a32d49.js b/assets/js/bf0dbc92.62a32d49.js new file mode 100644 index 000000000..eedb0f3fc --- /dev/null +++ b/assets/js/bf0dbc92.62a32d49.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8067],{843:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>c,metadata:()=>a,toc:()=>u});var r=n(1986),o=n(7355),i=n(5474);const c={},s="InView",a={id:"react/components/InView",title:"InView",description:"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/InView.mdx",sourceDirName:"react/components",slug:"/react/components/InView",permalink:"/modern-kit/docs/react/components/InView",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"},next:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"}},l={},u=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function d(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"inview",children:"InView"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 ",(0,r.jsx)(t.code,{children:"action"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"type InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;\n\nconst InView: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const onAction = () => {\n /* action */\n }\n\n return (\n
\n {/* ... */}\n Box1\n
\n );\n}; \n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsxs)("div",{style:{maxWidth:"500px",height:"500px",overflow:"scroll",background:"#f1f3f5"},children:[(0,r.jsx)("div",{style:{width:"100%",height:"600px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,r.jsx)(i.df,{style:{width:"100%",height:"300px",background:"#c0392B",color:"white",textAlign:"center",fontSize:"21px"},action:()=>console.log("action callback(1)"),calledOnce:!0,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:"Box1"}),(0,r.jsx)("p",{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,r.jsx)("p",{children:"action \ucf5c\ubc31 \ud568\uc218\uac00 \ucd5c\ucd08 1\ud68c\ub9cc \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,r.jsx)("p",{children:"calledOnce: true"})]})}),(0,r.jsx)("div",{style:{width:"100%",height:"100px"}}),(0,r.jsx)(i.df,{style:{width:"100%",height:"300px",background:"#89a5ea",color:"white",textAlign:"center",fontSize:"21px"},action:()=>console.log("action callback(2)"),children:(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:"Box2"}),(0,r.jsx)("p",{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,r.jsx)("p",{children:"action \ucf5c\ubc31 \ud568\uc218\uac00 \uc5ec\ub7ec \ubc88 \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,r.jsx)("p",{children:"calledOnce: false"})]})}),(0,r.jsx)("div",{style:{width:"100%",height:"600px",textAlign:"center"}})]})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>q,Mm:()=>H,ac:()=>Z,df:()=>U,iP:()=>J,nA:()=>$,uM:()=>P,wY:()=>B,yU:()=>G});var r=n(7800),o=n(1986),i=(n(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),a=s.Symbol,l=Object.prototype,u=l.hasOwnProperty,d=l.toString,f=a?a.toStringTag:void 0,p=Object.prototype.toString,h="[object Null]",v="[object Undefined]",x=a?a.toStringTag:void 0;var m="[object Symbol]",g=/\s/,b=/^\s+/;function w(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var y=NaN,j=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,k=parseInt;function I(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:h:x&&x in Object(e)?function(e){var t=u.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return p.call(e)}(e)}(e)==m}(e))return y;if(w(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=w(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(b,""):e}(e);var n=O.test(e);return n||E.test(e)?k(e.slice(2),n?2:8):j.test(e)?y:+e}var M=function(){return s.Date.now()},S=Math.max,R=Math.min;const C=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},V=(e,t,n={})=>{const o=C(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,a,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var n=r,i=o;return r=o=void 0,l=t,c=e.apply(i,n)}function h(e){var n=e-a;return void 0===a||n>=t||n<0||d&&e-l>=i}function v(){var e=M();if(h(e))return x(e);s=setTimeout(v,function(e){var n=t-(e-a);return d?R(n,i-(e-l)):n}(e))}function x(e){return s=void 0,f&&r?p(e):(r=o=void 0,c)}function m(){var e=M(),n=h(e);if(r=arguments,o=this,a=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(v,t),u?p(e):c}(a);if(d)return clearTimeout(s),s=setTimeout(v,t),p(a)}return void 0===s&&(s=setTimeout(v,t)),c}return t=I(t)||0,w(n)&&(u=!!n.leading,i=(d="maxWait"in n)?S(I(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=a=o=s=void 0},m.flush=function(){return void 0===s?c:x(M())},m}(o,t,n)),[o,t,n]);return(e=>{const t=C(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=V(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function T(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,A=()=>{},N=()=>!L(),D=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=C(null!=e?e:A),a=C((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return C((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(a,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},W=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),U=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,a=T(e,["action","calledOnce","threshold","root","rootMargin"]),l=D({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:W(t,l)},a,{children:e.children}))}));U.displayName="InView";const B=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:a}=e,l=T(e,["src","style","threshold","root","rootMargin"]);const u=D({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:a}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},l,{ref:W(t,u),style:d}))}));B.displayName="LazyImage";const F=N()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const $=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},H=()=>{const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>z(void 0,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}},Y=e=>!!N()&&window.matchMedia(e).matches,Z=e=>{const[t,n]=(0,r.useState)(Y(e)),o=(0,r.useCallback)((()=>{n(Y(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},q=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},G=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=C(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},J=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=V(c,n),a=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return F((()=>(c(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.c1529891.js b/assets/js/bf0dbc92.c1529891.js deleted file mode 100644 index 32d008a01..000000000 --- a/assets/js/bf0dbc92.c1529891.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8067],{843:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>s,default:()=>f,frontMatter:()=>c,metadata:()=>l,toc:()=>u});var r=n(1986),o=n(7355),i=n(5474);const c={},s="InView",l={id:"react/components/InView",title:"InView",description:"Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 action \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/InView.mdx",sourceDirName:"react/components",slug:"/react/components/InView",permalink:"/modern-kit/docs/react/components/InView",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"},next:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"}},a={},u=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function d(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"inview",children:"InView"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c props\ub85c \ub118\uaca8\uc8fc\ub294 ",(0,r.jsx)(t.code,{children:"action"})," \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"type InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;\n\nconst InView: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const onAction = () => {\n /* action */\n }\n\n return (\n
\n {/* ... */}\n Box1\n
\n );\n}; \n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsxs)("div",{style:{maxWidth:"500px",height:"500px",overflow:"scroll",background:"#f1f3f5"},children:[(0,r.jsx)("div",{style:{width:"100%",height:"600px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,r.jsx)(i.df,{style:{width:"100%",height:"300px",background:"#c0392B",color:"white",textAlign:"center",fontSize:"21px"},action:()=>console.log("action callback(1)"),calledOnce:!0,children:(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:"Box1"}),(0,r.jsx)("p",{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,r.jsx)("p",{children:"action \ucf5c\ubc31 \ud568\uc218\uac00 \ucd5c\ucd08 1\ud68c\ub9cc \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,r.jsx)("p",{children:"calledOnce: true"})]})}),(0,r.jsx)("div",{style:{width:"100%",height:"100px"}}),(0,r.jsx)(i.df,{style:{width:"100%",height:"300px",background:"#89a5ea",color:"white",textAlign:"center",fontSize:"21px"},action:()=>console.log("action callback(2)"),children:(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:"Box2"}),(0,r.jsx)("p",{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,r.jsx)("p",{children:"action \ucf5c\ubc31 \ud568\uc218\uac00 \uc5ec\ub7ec \ubc88 \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,r.jsx)("p",{children:"calledOnce: false"})]})}),(0,r.jsx)("div",{style:{width:"100%",height:"600px",textAlign:"center"}})]})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},7355:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>c});var r=n(7800);const o={},i=r.createContext(o);function c(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),r.createElement(i.Provider,{value:t},e.children)}},5474:(e,t,n)=>{n.d(t,{D9:()=>Y,ac:()=>H,df:()=>N,iP:()=>q,nA:()=>F,uM:()=>P,wY:()=>U,yU:()=>Z});var r=n(7800),o=n(1986),i=(n(7143),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),l=s.Symbol,a=Object.prototype,u=a.hasOwnProperty,d=a.toString,f=l?l.toStringTag:void 0,p=Object.prototype.toString,h="[object Null]",v="[object Undefined]",x=l?l.toStringTag:void 0;var m="[object Symbol]",g=/\s/,b=/^\s+/;function w(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var j=NaN,y=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,k=parseInt;function I(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?v:h:x&&x in Object(e)?function(e){var t=u.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=d.call(e);return r&&(t?e[f]=n:delete e[f]),o}(e):function(e){return p.call(e)}(e)}(e)==m}(e))return j;if(w(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=w(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&g.test(e.charAt(t)););return t}(e)+1).replace(b,""):e}(e);var n=O.test(e);return n||E.test(e)?k(e.slice(2),n?2:8):y.test(e)?j:+e}var M=function(){return s.Date.now()},S=Math.max,R=Math.min;const C=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),(0,r.useCallback)(((...e)=>t.current(...e)),[])},V=(e,t,n={})=>{const o=C(e),i=(0,r.useMemo)((()=>function(e,t,n){var r,o,i,c,s,l,a=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(t){var n=r,i=o;return r=o=void 0,a=t,c=e.apply(i,n)}function h(e){var n=e-l;return void 0===l||n>=t||n<0||d&&e-a>=i}function v(){var e=M();if(h(e))return x(e);s=setTimeout(v,function(e){var n=t-(e-l);return d?R(n,i-(e-a)):n}(e))}function x(e){return s=void 0,f&&r?p(e):(r=o=void 0,c)}function m(){var e=M(),n=h(e);if(r=arguments,o=this,l=e,n){if(void 0===s)return function(e){return a=e,s=setTimeout(v,t),u?p(e):c}(l);if(d)return clearTimeout(s),s=setTimeout(v,t),p(l)}return void 0===s&&(s=setTimeout(v,t)),c}return t=I(t)||0,w(n)&&(u=!!n.leading,i=(d="maxWait"in n)?S(I(n.maxWait)||0,t):i,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),a=0,r=l=o=s=void 0},m.flush=function(){return void 0===s?c:x(M())},m}(o,t,n)),[o,t,n]);return(e=>{const t=C(e);(0,r.useEffect)((()=>()=>t()),[t])})((()=>i.cancel())),i},P=({children:e,capture:t,wait:n,options:o})=>{const i=r.Children.only(e),c=V(((...e)=>{const n=null==i?void 0:i.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,r.cloneElement)(i,{[t]:c})};function T(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o"undefined"==typeof window&&"undefined"!=typeof global,A=()=>{},L=()=>!z(),D=({action:e,calledOnce:t=!1,root:n=null,threshold:o=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,r.useRef)(null),s=C(null!=e?e:A),l=C((([e],n)=>{if(e&&e.isIntersecting){const r=e.target;s&&s(e),t&&n.unobserve(r)}}));return C((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(l,{root:n,threshold:o,rootMargin:i}),e&&c.current.observe(e)}))},W=(...e)=>(0,r.useCallback)((t=>{e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)}))}),[...e]),N=(0,r.forwardRef)(((e,t)=>{const{action:n,calledOnce:r,threshold:i,root:c,rootMargin:s}=e,l=T(e,["action","calledOnce","threshold","root","rootMargin"]),a=D({action:n,calledOnce:r,threshold:i,root:c,rootMargin:s});return(0,o.jsx)("div",Object.assign({ref:W(t,a)},l,{children:e.children}))})),U=(0,r.forwardRef)(((e,t)=>{var{src:n,style:i,threshold:c,root:s,rootMargin:l}=e,a=T(e,["src","style","threshold","root","rootMargin"]);const u=D({action:e=>{e.target.src=n},calledOnce:!0,threshold:c,root:s,rootMargin:l}),d=(0,r.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,o.jsx)("img",Object.assign({},a,{ref:W(t,u),style:d}))})),B=L()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const F=({children:e,condition:t})=>{var n;return("function"==typeof(n=t)?n():n)?(0,o.jsx)(r.Fragment,{children:e}):null},$=e=>!!L()&&window.matchMedia(e).matches,H=e=>{const[t,n]=(0,r.useState)($(e)),o=(0,r.useCallback)((()=>{n($(e))}),[e]);return(0,r.useEffect)((()=>{const t=window.matchMedia(e);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}),[e,o]),{isMatch:t}},Y=e=>{const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current},Z=e=>{const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,r.useRef)(null),i=C(e),c=(0,r.useCallback)((([e])=>{e&&(i(e),n(e.contentRect))}),[i]);return(0,r.useEffect)((()=>{const e=o.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const t=new ResizeObserver(c);return t.observe(e),()=>{t.unobserve(e)}}),[c]),{ref:o,contentRect:t}},q=(e={})=>{const{isDebounce:t=!1,wait:n=300}=e,[o,i]=(0,r.useState)({width:null,height:null}),c=(0,r.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=V(c,n),l=(0,r.useMemo)((()=>t?s:c),[c,t,s]);return B((()=>(c(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)})),[]),o}}}]); \ No newline at end of file diff --git a/assets/js/db388e02.a60f06c5.js b/assets/js/db388e02.a60f06c5.js new file mode 100644 index 000000000..78532f36e --- /dev/null +++ b/assets/js/db388e02.a60f06c5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9576],{2879:(e,n,t)=>{t.r(n),t.d(n,{Example:()=>d,assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>u,toc:()=>f});var o=t(1986),r=t(7355),i=t(7800),c=t(5474);const s={},l="useBlockPromiseMultipleClick",u={id:"react/hooks/useBlockPromiseMultipleClick",title:"useBlockPromiseMultipleClick",description:"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useBlockPromiseMultipleClick.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"},next:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"}},a={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[n,t]=(0,i.useState)(1),[s,l]=(0,i.useState)(1),[u,a]=(0,i.useState)(null),{isLoading:d,blockMultipleClick:f}=(0,c.Mm)(),p=async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/todos/${n}`).then((e=>e.json()));a(e),t(n+1)};return(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{l(s+1),f(p)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.p,{children:["BlockingCount: ",n]}),(0,o.jsxs)(e.p,{children:["NonBlockingCount: ",s]})]}),d?(0,o.jsx)(e.p,{children:"\ub85c\ub529\uc911"}):(0,o.jsx)(e.p,{children:u?.title})]})},f=[{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"useblockpromisemultipleclick",children:"useBlockPromiseMultipleClick"}),"\n",(0,o.jsxs)(n.p,{children:["\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 ",(0,o.jsx)(n.code,{children:"Promise"})," \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 ",(0,o.jsx)(n.code,{children:"\uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8"}),"\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useDebounce",children:"useDebounce"}),"\ub97c \uc0ac\uc6a9\ud574 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud560 \uc218\ub294 \uc788\uc9c0\ub9cc, \uc2dc\uac04 \uac12\uc5d0 \uc758\uc874\ud558\uae30 \ub54c\ubb38\uc5d0 \ub9cc\uc57d ",(0,o.jsx)(n.code,{children:"Promise"}),"\uac00 \uc774\ud589\ub420 \ub54c\uae4c\uc9c0 \ud638\ucd9c\uc744 \uc644\ubcbd\ud558\uac8c \ucc28\ub2e8\ud574\uc57c \ud55c\ub2e4\uba74 \ubd80\uc871\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(n.p,{children:["\ud574\ub2f9 \ud6c5\uc740 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \ub54c\ubb38\uc5d0, ",(0,o.jsx)(n.code,{children:"Promise"})," \uc774\ud589\uc744 \ubcf4\uc7a5\ud558\uba74\uc11c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uace0 \uc2f6\uc744 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"const useBlockPromiseMultipleClick: () => {\n isLoading: boolean;\n blockMultipleClick: (callback: () => Promise) => Promise;\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import React, { useState } from 'react';\nimport { useBlockPromiseMultipleClick } from '@modern-kit/react';\n\ninterface Value {\n userId: number;\n id: number;\n title: string;\n completed: boolean;\n}\n\nconst Example = () => {\n const [blockingCount, setBlockingCount] = useState(1);\n const [nonBlockingCount, setNonBlockingCount] = useState(1);\n const [value, setValue] = useState(null);\n\n const { isLoading, blockMultipleClick } = useBlockPromiseMultipleClick();\n\n const fetchApi = async () => {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/todos/${blockingCount}`\n ).then((response) => response.json());\n\n setValue(res);\n setBlockingCount(blockingCount + 1);\n };\n\n const handleClick = () => {\n setNonBlockingCount(nonBlockingCount + 1);\n blockMultipleClick(fetchApi); // (*) Promise \ubc18\ud658\ud558\ub294 \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4\uc8fc\uc138\uc694.\n };\n\n return (\n
\n \n
\n

BlockingCount: {blockingCount}

\n

NonBlockingCount: {nonBlockingCount}

\n
\n {isLoading ?

\ub85c\ub529\uc911

:

{value?.title}

}\n
\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},7355:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>c});var o=t(7800);const r={},i=o.createContext(r);function c(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(i.Provider,{value:n},e.children)}},5474:(e,n,t)=>{t.d(n,{D9:()=>q,Mm:()=>H,ac:()=>Z,df:()=>$,iP:()=>J,nA:()=>W,uM:()=>R,wY:()=>U,yU:()=>G});var o=t(7800),r=t(1986),i=(t(286),"object"==typeof global&&global&&global.Object===Object&&global),c="object"==typeof self&&self&&self.Object===Object&&self,s=i||c||Function("return this")(),l=s.Symbol,u=Object.prototype,a=u.hasOwnProperty,d=u.toString,f=l?l.toStringTag:void 0,p=Object.prototype.toString,h="[object Null]",m="[object Undefined]",b=l?l.toStringTag:void 0;var v="[object Symbol]",k=/\s/,g=/^\s+/;function x(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}var y=NaN,j=/^[-+]0x[0-9a-f]+$/i,C=/^0b[01]+$/i,w=/^0o[0-7]+$/i,M=parseInt;function O(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?m:h:b&&b in Object(e)?function(e){var n=a.call(e,f),t=e[f];try{e[f]=void 0;var o=!0}catch(e){}var r=d.call(e);return o&&(n?e[f]=t:delete e[f]),r}(e):function(e){return p.call(e)}(e)}(e)==v}(e))return y;if(x(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=x(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var n=e.length;n--&&k.test(e.charAt(n)););return n}(e)+1).replace(g,""):e}(e);var t=C.test(e);return t||w.test(e)?M(e.slice(2),t?2:8):j.test(e)?y:+e}var P=function(){return s.Date.now()},E=Math.max,S=Math.min;const B=e=>{const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),(0,o.useCallback)(((...e)=>n.current(...e)),[])},N=(e,n,t={})=>{const r=B(e),i=(0,o.useMemo)((()=>function(e,n,t){var o,r,i,c,s,l,u=0,a=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function p(n){var t=o,i=r;return o=r=void 0,u=n,c=e.apply(i,t)}function h(e){var t=e-l;return void 0===l||t>=n||t<0||d&&e-u>=i}function m(){var e=P();if(h(e))return b(e);s=setTimeout(m,function(e){var t=n-(e-l);return d?S(t,i-(e-u)):t}(e))}function b(e){return s=void 0,f&&o?p(e):(o=r=void 0,c)}function v(){var e=P(),t=h(e);if(o=arguments,r=this,l=e,t){if(void 0===s)return function(e){return u=e,s=setTimeout(m,n),a?p(e):c}(l);if(d)return clearTimeout(s),s=setTimeout(m,n),p(l)}return void 0===s&&(s=setTimeout(m,n)),c}return n=O(n)||0,x(t)&&(a=!!t.leading,i=(d="maxWait"in t)?E(O(t.maxWait)||0,n):i,f="trailing"in t?!!t.trailing:f),v.cancel=function(){void 0!==s&&clearTimeout(s),u=0,o=l=r=s=void 0},v.flush=function(){return void 0===s?c:b(P())},v}(r,n,t)),[r,n,t]);return(e=>{const n=B(e);(0,o.useEffect)((()=>()=>n()),[n])})((()=>i.cancel())),i},R=({children:e,capture:n,wait:t,options:r})=>{const i=o.Children.only(e),c=N(((...e)=>{const t=null==i?void 0:i.props;if(t)return"function"==typeof t[n]?t[n](...e):void 0}),t,r);return(0,o.cloneElement)(i,{[n]:c})};function L(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r"undefined"==typeof window&&"undefined"!=typeof global,D=()=>{},A=()=>!I(),z=({action:e,calledOnce:n=!1,root:t=null,threshold:r=[0],rootMargin:i="0px 0px 0px 0px"})=>{const c=(0,o.useRef)(null),s=B(null!=e?e:D),l=B((([e],t)=>{if(e&&e.isIntersecting){const o=e.target;s&&s(e),n&&t.unobserve(o)}}));return B((e=>{c.current&&c.current.disconnect(),c.current=new IntersectionObserver(l,{root:t,threshold:r,rootMargin:i}),e&&c.current.observe(e)}))},V=(...e)=>(0,o.useCallback)((n=>{e.forEach((e=>{"function"==typeof e?e(n):null!=e&&(e.current=n)}))}),[...e]),$=(0,o.forwardRef)(((e,n)=>{const{action:t,calledOnce:o,threshold:i,root:c,rootMargin:s}=e,l=L(e,["action","calledOnce","threshold","root","rootMargin"]),u=z({action:t,calledOnce:o,threshold:i,root:c,rootMargin:s});return(0,r.jsx)("div",Object.assign({ref:V(n,u)},l,{children:e.children}))}));$.displayName="InView";const U=(0,o.forwardRef)(((e,n)=>{var{src:t,style:i,threshold:c,root:s,rootMargin:l}=e,u=L(e,["src","style","threshold","root","rootMargin"]);const a=z({action:e=>{e.target.src=t},calledOnce:!0,threshold:c,root:s,rootMargin:l}),d=(0,o.useMemo)((()=>Object.assign({display:"inline-block"},i)),[i]);return(0,r.jsx)("img",Object.assign({},u,{ref:V(n,a),style:d}))}));U.displayName="LazyImage";const F=A()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const W=({children:e,condition:n})=>{var t;return("function"==typeof(t=n)?t():t)?(0,r.jsx)(o.Fragment,{children:e}):null},H=()=>{const[e,n]=(0,o.useState)(!1),t=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>T(void 0,void 0,void 0,(function*(){t.current||(t.current=!0,n(!0),yield e(),t.current=!1,n(!1))}))}},Y=e=>!!A()&&window.matchMedia(e).matches,Z=e=>{const[n,t]=(0,o.useState)(Y(e)),r=(0,o.useCallback)((()=>{t(Y(e))}),[e]);return(0,o.useEffect)((()=>{const n=window.matchMedia(e);return n.addEventListener("change",r),()=>n.removeEventListener("change",r)}),[e,r]),{isMatch:n}},q=e=>{const n=(0,o.useRef)(e);return(0,o.useEffect)((()=>{n.current=e}),[e]),n.current},G=e=>{const[n,t]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,o.useRef)(null),i=B(e),c=(0,o.useCallback)((([e])=>{e&&(i(e),t(e.contentRect))}),[i]);return(0,o.useEffect)((()=>{const e=r.current;if("undefined"==typeof ResizeObserver)return;if(!e)return;const n=new ResizeObserver(c);return n.observe(e),()=>{n.unobserve(e)}}),[c]),{ref:r,contentRect:n}},J=(e={})=>{const{isDebounce:n=!1,wait:t=300}=e,[r,i]=(0,o.useState)({width:null,height:null}),c=(0,o.useCallback)((()=>{i({width:window.innerWidth,height:window.innerHeight})}),[]),s=N(c,t),l=(0,o.useMemo)((()=>n?s:c),[c,n,s]);return F((()=>(c(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)})),[]),r}}}]); \ No newline at end of file diff --git a/assets/js/main.ce506dad.js b/assets/js/main.ce506dad.js new file mode 100644 index 000000000..5aa6dcd34 --- /dev/null +++ b/assets/js/main.ce506dad.js @@ -0,0 +1,2 @@ +/*! For license information please see main.ce506dad.js.LICENSE.txt */ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[179],{5001:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>i});var r=n(7800),o=n(1986);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},9098:(e,t,n)=>{"use strict";var r=n(7800),o=n(4918),a=n(6985),i=n(2683),l=n(4644);const s=[n(674),n(7506),n(1779),n(3582)];var c=n(3905),u=n(2381),d=n(2251),p=n(1986);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var m=n(7036),h=n(3020),g=n(8509),b=n(8057),y=n(9603),v=n(6480),k=n(6513),w=n(4798),x=n(5797),S=n(5035);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,h.Z)(),r=(0,v.l)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,p.jsxs)(m.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function C(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.Z)(),{pathname:r}=(0,u.TH)();return e+(0,x.applyTrailingSlash)((0,g.Z)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,p.jsxs)(m.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:o}),(0,p.jsx)("link",{rel:"canonical",href:o})]})}function _(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,b.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:k.h})]}),n&&(0,p.jsx)(y.d,{image:n}),(0,p.jsx)(C,{}),(0,p.jsx)(E,{}),(0,p.jsx)(S.Z,{tag:w.HX,locale:e}),(0,p.jsx)(m.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const T=new Map;function j(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var P=n(5001),N=n(4939),L=n(7539);function A(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const R=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,L.Z)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),A("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class I extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?A("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=A("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.AW,{location:t,render:()=>e})})}}const D=I,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var K=n(3821);const Y=new Set,X=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Y.has(e))(e))return!1;Y.add(e);const t=(0,d.f)(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(G).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,K.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Q(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),O(e))},te=Object.freeze(ee),ne=Boolean(!0);if(l.Z.canUseDOM){window.docusaurus=te;const e=document.getElementById("__docusaurus"),t=(0,p.jsx)(i.B6,{children:(0,p.jsx)(a.VK,{children:(0,p.jsx)(W,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},l=()=>{if(ne)r.startTransition((()=>{o.hydrateRoot(e,t,{onRecoverableError:n})}));else{const a=o.createRoot(e,{onRecoverableError:n});r.startTransition((()=>{a.render(t)}))}};O(window.location.pathname).then(l)}},4939:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var r=n(7800),o=n(6809);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/modern-kit/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/modern-kit/docs","mainDocId":"introduce/Introduce","docs":[{"id":"introduce/Introduce","path":"/modern-kit/docs/introduce/","sidebar":"tutorialSidebar"},{"id":"react/components/DebounceWrapper","path":"/modern-kit/docs/react/components/DebounceWrapper","sidebar":"tutorialSidebar"},{"id":"react/components/InView","path":"/modern-kit/docs/react/components/InView","sidebar":"tutorialSidebar"},{"id":"react/components/LazyImage","path":"/modern-kit/docs/react/components/LazyImage","sidebar":"tutorialSidebar"},{"id":"react/components/Portal","path":"/modern-kit/docs/react/components/Portal","sidebar":"tutorialSidebar"},{"id":"react/components/When","path":"/modern-kit/docs/react/components/When","sidebar":"tutorialSidebar"},{"id":"react/hooks/useAsyncPreservedCallback","path":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","sidebar":"tutorialSidebar"},{"id":"react/hooks/useBlockPromiseMultipleClick","path":"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebounce","path":"/modern-kit/docs/react/hooks/useDebounce","sidebar":"tutorialSidebar"},{"id":"react/hooks/useForceUpdate","path":"/modern-kit/docs/react/hooks/useForceUpdate","sidebar":"tutorialSidebar"},{"id":"react/hooks/useImageStatus","path":"/modern-kit/docs/react/hooks/useImageStatus","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIntersectionObserver","path":"/modern-kit/docs/react/hooks/useIntersectionObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useInterval","path":"/modern-kit/docs/react/hooks/useInterval","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsMounted","path":"/modern-kit/docs/react/hooks/useIsMounted","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsomorphicLayoutEffect","path":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMediaQuery","path":"/modern-kit/docs/react/hooks/useMediaQuery","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMergeRefs","path":"/modern-kit/docs/react/hooks/useMergeRefs","sidebar":"tutorialSidebar"},{"id":"react/hooks/useOnClickOutside","path":"/modern-kit/docs/react/hooks/useOnClickOutside","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedCallback","path":"/modern-kit/docs/react/hooks/usePreservedCallback","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedState","path":"/modern-kit/docs/react/hooks/usePreservedState","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePrevious","path":"/modern-kit/docs/react/hooks/usePrevious","sidebar":"tutorialSidebar"},{"id":"react/hooks/useResizeObserver","path":"/modern-kit/docs/react/hooks/useResizeObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useTimeout","path":"/modern-kit/docs/react/hooks/useTimeout","sidebar":"tutorialSidebar"},{"id":"react/hooks/useToggle","path":"/modern-kit/docs/react/hooks/useToggle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useUnmount","path":"/modern-kit/docs/react/hooks/useUnmount","sidebar":"tutorialSidebar"},{"id":"react/hooks/useVisibilityChange","path":"/modern-kit/docs/react/hooks/useVisibilityChange","sidebar":"tutorialSidebar"},{"id":"react/hooks/useWindowScrollTo","path":"/modern-kit/docs/react/hooks/useWindowScrollTo","sidebar":"tutorialSidebar"},{"id":"react/hooks/useWindowSize","path":"/modern-kit/docs/react/hooks/useWindowSize","sidebar":"tutorialSidebar"},{"id":"utils/common/abRandom","path":"/modern-kit/docs/utils/common/abRandom","sidebar":"tutorialSidebar"},{"id":"utils/common/asyncNoop","path":"/modern-kit/docs/utils/common/asyncNoop","sidebar":"tutorialSidebar"},{"id":"utils/common/deepCopy","path":"/modern-kit/docs/utils/common/deepCopy","sidebar":"tutorialSidebar"},{"id":"utils/common/deepEqual","path":"/modern-kit/docs/utils/common/deepEqual","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqId","path":"/modern-kit/docs/utils/common/getUniqId","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqTime","path":"/modern-kit/docs/utils/common/getUniqTime","sidebar":"tutorialSidebar"},{"id":"utils/common/getViewportSize","path":"/modern-kit/docs/utils/common/getViewportSize","sidebar":"tutorialSidebar"},{"id":"utils/common/hexToRgba","path":"/modern-kit/docs/utils/common/hexToRgba","sidebar":"tutorialSidebar"},{"id":"utils/common/noop","path":"/modern-kit/docs/utils/common/noop","sidebar":"tutorialSidebar"},{"id":"utils/common/wrapInArray","path":"/modern-kit/docs/utils/common/wrapInArray","sidebar":"tutorialSidebar"},{"id":"utils/device/getOS","path":"/modern-kit/docs/utils/device/getOS","sidebar":"tutorialSidebar"},{"id":"utils/device/isClient","path":"/modern-kit/docs/utils/device/isClient","sidebar":"tutorialSidebar"},{"id":"utils/device/isMobile","path":"/modern-kit/docs/utils/device/isMobile","sidebar":"tutorialSidebar"},{"id":"utils/device/isSever","path":"/modern-kit/docs/utils/device/isSever","sidebar":"tutorialSidebar"},{"id":"utils/object/deleteEmptyProperties","path":"/modern-kit/docs/utils/object/deleteEmptyProperties","sidebar":"tutorialSidebar"},{"id":"utils/object/mergeProperties","path":"/modern-kit/docs/utils/object/mergeProperties","sidebar":"tutorialSidebar"},{"id":"utils/object/objectEntries","path":"/modern-kit/docs/utils/object/objectEntries","sidebar":"tutorialSidebar"},{"id":"utils/object/objectKeys","path":"/modern-kit/docs/utils/object/objectKeys","sidebar":"tutorialSidebar"},{"id":"utils/object/objectValues","path":"/modern-kit/docs/utils/object/objectValues","sidebar":"tutorialSidebar"},{"id":"utils/object/omit","path":"/modern-kit/docs/utils/object/omit","sidebar":"tutorialSidebar"},{"id":"utils/object/pick","path":"/modern-kit/docs/utils/object/pick","sidebar":"tutorialSidebar"},{"id":"utils/string/countSubstringOccurrences","path":"/modern-kit/docs/utils/string/countSubstringOccurrences","sidebar":"tutorialSidebar"},{"id":"utils/string/extractNumber","path":"/modern-kit/docs/utils/string/extractNumber","sidebar":"tutorialSidebar"},{"id":"utils/string/formatNumberWithCommas","path":"/modern-kit/docs/utils/string/formatNumberWithCommas","sidebar":"tutorialSidebar"},{"id":"utils/string/formatPhoneNumber","path":"/modern-kit/docs/utils/string/formatPhoneNumber","sidebar":"tutorialSidebar"},{"id":"utils/string/removeSpecialCharacters","path":"/modern-kit/docs/utils/string/removeSpecialCharacters","sidebar":"tutorialSidebar"},{"id":"utils/string/repeatCharacters","path":"/modern-kit/docs/utils/string/repeatCharacters","sidebar":"tutorialSidebar"},{"id":"utils/validator/hasProperty","path":"/modern-kit/docs/utils/validator/hasProperty","sidebar":"tutorialSidebar"},{"id":"utils/validator/isFuntion","path":"/modern-kit/docs/utils/validator/isFuntion","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNotNullish","path":"/modern-kit/docs/utils/validator/isNotNullish","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNullish","path":"/modern-kit/docs/utils/validator/isNullish","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNumber","path":"/modern-kit/docs/utils/validator/isNumber","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidEmail","path":"/modern-kit/docs/utils/validator/isValidEmail","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidPhoneNumberFormat","path":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/modern-kit/docs/introduce/","label":"Introduce"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"3.2.1","siteVersion":"0.0.11","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.2.1"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.2.1"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.2.1"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.2.1"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.2.1"}}}');var c=n(1986);const u={siteConfig:o.default,siteMetadata:s,globalData:a,i18n:i,codeTranslations:l},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},3918:(e,t,n)=>{"use strict";n.d(t,{Z:()=>h});var r=n(7800),o=n(4644),a=n(7036),i=n(7339),l=n(1054),s=n(5247),c=n(1986);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(s.z,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(h,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.Z,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(l.Z,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const m=e=>(0,c.jsx)(f,{...e});class h extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??m)(e)}return e??null}}},4644:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},7036:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);var r=n(2683),o=n(1986);function a(e){return(0,o.jsx)(r.ql,{...e})}},3497:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7800),o=n(6985),a=n(7339),i=n(3020),l=n(4010),s=n(4644),c=n(7026),u=n(8509),d=n(1986);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":g,autoAddBaseUrl:b=!0,...y}=e;const{siteConfig:{trailingSlash:v,baseUrl:k}}=(0,i.Z)(),{withBaseUrl:w}=(0,u.C)(),x=(0,c.Z)(),S=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>S.current));const E=p||f;const C=(0,l.Z)(E),_=E?.replace("pathname://","");let T=void 0!==_?(j=_,b&&(e=>e.startsWith("/"))(j)?w(j):j):void 0;var j;T&&C&&(T=(0,a.applyTrailingSlash)(T,{trailingSlash:v,baseUrl:k}));const P=(0,r.useRef)(!1),N=n?o.OL:o.rU,L=s.Z.canUseIntersectionObserver,A=(0,r.useRef)(),R=()=>{P.current||null==T||(window.docusaurus.preload(T),P.current=!0)};(0,r.useEffect)((()=>(!L&&C&&null!=T&&window.docusaurus.prefetch(T),()=>{L&&A.current&&A.current.disconnect()})),[A,T,L,C]);const O=T?.startsWith("#")??!1,I=!y.target||"_self"===y.target,D=!T||!C||!I||O;return g||!O&&D||x.collectLink(T),y.id&&x.collectAnchor(y.id),D?(0,d.jsx)("a",{ref:S,href:T,...E&&!C&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,d.jsx)(N,{...y,onMouseEnter:R,onTouchStart:R,innerRef:e=>{S.current=e,L&&e&&C&&(A.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(A.current.unobserve(e),A.current.disconnect(),null!=T&&window.docusaurus.prefetch(T))}))})),A.current.observe(e))},to:T,...n&&{isActive:h,activeClassName:m}})}const f=r.forwardRef(p)},5242:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const r=()=>null},3583:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c,I:()=>s});var r=n(7800),o=n(1986);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(7529);function l(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function s(e,t){let{message:n,id:r}=e;return a(l({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=l({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},8963:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},4010:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>o,b:()=>r})},8509:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(7800),o=n(3020),a=n(4010);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,o.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:o=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,a.b)(n))return n;if(o)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},7026:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7800);n(1986);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},3020:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7800),o=n(4939);function a(){return(0,r.useContext)(o._)}},7638:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7800),o=n(5001);function a(){return(0,r.useContext)(o._)}},7539:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7800);const o=n(4644).Z.canUseDOM?r.useLayoutEffect:r.useEffect},3821:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,i]=n;const l=o?`${o}.${a}`:a;r(i)?e(i,l):t[l]=i}))}(e),t}},5247:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>i});var r=n(7800),o=n(1986);const a=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(a),l=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(a.Provider,{value:l,children:t})}},4153:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>p,_r:()=>u,Jo:()=>g,zh:()=>d,yW:()=>m,gB:()=>f});var r=n(2381),o=n(3020),a=n(8963);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=function(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),o=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}const c={},u=()=>i("docusaurus-plugin-content-docs")??c,d=e=>{try{return function(e,t,n){void 0===t&&(t=a.m),void 0===n&&(n={});const r=i(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function p(e){void 0===e&&(e={});const t=u(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function f(e){return d(e).versions}function m(e){const t=d(e);return l(t)}function h(e){const t=d(e),{pathname:n}=(0,r.TH)();return s(t,n)}function g(e){const t=d(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:s(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},7173:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(2602),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},7506:(e,t,n)=>{"use strict";n.r(t);var r=n(851),o=n(6809);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(8624),n(9932)(`./prism-${e}`)})),delete globalThis.Prism}(r.p1)},9290:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7800);var r=n(605),o=n(3583),a=n(8057),i=n(3497),l=n(7026);const s={anchorWithStickyNavbar:"anchorWithStickyNavbar_bBUo",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_sx3F"};var c=n(1986);function u(e){let{as:t,id:n,...u}=e;const d=(0,l.Z)(),{navbar:{hideOnScroll:p}}=(0,a.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.Z)("anchor",p?s.anchorWithHideOnScrollNavbar:s.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},4071:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);const r={iconExternalLink:"iconExternalLink_z2ez"};var o=n(1986);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},1054:(e,t,n)=>{"use strict";n.d(t,{Z:()=>ft});var r=n(7800),o=n(605),a=n(3918),i=n(9603),l=n(2381),s=n(3583),c=n(1853),u=n(1986);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,l.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,s.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var g=n(1329),b=n(6513);const y={skipToContent:"skipToContent_NeAS"};function v(){return(0,u.jsx)(h,{className:y.skipToContent})}var k=n(8057),w=n(7288);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_q_Pt"};function E(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.Z)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const C={content:"content_bfW5"};function _(e){const{announcementBar:t}=(0,k.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.Z)(C.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_G6_o",announcementBarPlaceholder:"announcementBarPlaceholder_TcsH",announcementBarClose:"announcementBarClose_aSKT",announcementBarContent:"announcementBarContent_u0N6"};function j(){const{announcementBar:e}=(0,k.L)(),{isActive:t,close:n}=(0,w.nT)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:T.announcementBarPlaceholder}),(0,u.jsx)(_,{className:T.announcementBarContent}),a&&(0,u.jsx)(E,{onClick:n,className:T.announcementBarClose})]})}var P=n(1875),N=n(9481);var L=n(183),A=n(1168);const R=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,P.e)(),t=(0,A.HY)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,i=(0,L.D9)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(R.Provider,{value:n,children:t})}function I(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(R);if(!e)throw new L.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,A.HY)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:I(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(859),z=n(7638);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_IyHc",toggleButton:"toggleButton_HgLb",darkToggleIcon:"darkToggleIcon_t8VM",lightToggleIcon:"lightToggleIcon_GUf5",toggleButtonDisabled:"toggleButtonDisabled_MXdp"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const i=(0,z.Z)(),l=(0,s.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,s.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,s.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.Z)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.Z)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:l,"aria-label":l,"aria-live":"polite",children:[(0,u.jsx)(B,{className:(0,o.Z)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.Z)($.toggleIcon,$.darkToggleIcon)})]})})}const H=r.memo(q),Z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_kZvc"};function V(e){let{className:t}=e;const n=(0,k.L)().navbar.style,r=(0,k.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.I)();return r?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?Z.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var W=n(3747);function G(){return(0,u.jsx)(W.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,P.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function K(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(G,{}),(0,u.jsx)(V,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Y=n(3497),X=n(8509),J=n(4010);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(4071);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:i,isDropdownLink:l,prependBaseUrlToHref:s,...c}=e;const d=(0,X.Z)(r),p=(0,X.Z)(t),f=(0,X.Z)(o,{forcePrependBaseUrl:!0}),m=a&&o&&!(0,J.Z)(o),h=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,m&&(0,u.jsx)(te.Z,{...l&&{width:12,height:12}})]})};return o?(0,u.jsx)(Y.Z,{href:s?f:o,...c,...h}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...h})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.Z)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(8134),le=n(6239),se=n(3020);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_ueh8"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:i,...l}=e;const s=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{s.current&&!s.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[s]),(0,u.jsxs)("div",{ref:s,className:(0,o.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:l.to?void 0:"#",className:(0,o.Z)("navbar__link",a),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:l.children??l.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(Ce,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:i,...s}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,l.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,o.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.Z)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...s,onClick:e=>{e.preventDefault(),f()},children:s.children??s.label}),(0,u.jsx)(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(Ce,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var me=n(6480);function he(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const ge="iconLanguage_YNE4";var be=n(5242);const ye={navbarSearchContainer:"navbarSearchContainer_aE3I"};function ve(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.Z)(n,ye.navbarSearchContainer),children:t})}var ke=n(4153),we=n(7746);var xe=n(4755);const Se=e=>e.docs.find((t=>t.id===e.mainDocId));const Ee={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.Z)(),p=(0,me.l)(),{search:f,hash:m}=(0,l.TH)(),h=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],g=t?(0,s.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(he,{className:ge}),g]}),items:h})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(ve,{className:n,children:(0,u.jsx)(be.Z,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.Z)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.Iw)(r),i=(0,we.vY)(t,r),l=a?.path===i?.path;return null===i||i.unlisted&&!l?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>l||!!a?.sidebar&&a.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.Iw)(r),i=(0,we.oz)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,we.lO)(r)[0],i=t??a.label,l=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:l})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,l.TH)(),p=(0,ke.Iw)(n),f=(0,ke.gB)(n),{savePreferredVersionName:m}=(0,xe.J)(n),h=[...o,...f.map((e=>{const t=p.alternateDocVersions[e.name]??Se(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...a],g=(0,we.lO)(n)[0],b=t&&h.length>1?(0,s.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):g.label,y=t&&h.length>1?void 0:Se(g).path;return h.length<=1?(0,u.jsx)(ae,{...i,mobile:t,label:b,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:b,to:y,items:h,isActive:r?()=>!1:void 0})}};function Ce(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=Ee[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function _e(){const e=(0,P.e)(),t=(0,k.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(Ce,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Te(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(s.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function je(){const e=0===(0,k.L)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Te,{onClick:()=>t.hide()}),t.content]})}function Pe(){const e=(0,P.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(K,{}),primaryMenu:(0,u.jsx)(_e,{}),secondaryMenu:(0,u.jsx)(je,{})}):null}const Ne={navbarHideable:"navbarHideable_Cjnr",navbarHidden:"navbarHidden_Iq9w"};function Le(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.Z)("navbar-sidebar__backdrop",e.className)})}function Ae(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,k.L)(),i=(0,P.e)(),{navbarRef:l,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,N.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:l,"aria-label":(0,s.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.Z)("navbar","navbar--fixed-top",n&&[Ne.navbarHideable,!d&&Ne.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Le,{onClick:i.toggle}),(0,u.jsx)(Pe,{})]})}var Re=n(7339);const Oe={errorBoundaryError:"errorBoundaryError_TGhe",errorBoundaryFallback:"errorBoundaryFallback_tL4V"};function Ie(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function De(e){let{error:t}=e;const n=(0,Re.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Oe.errorBoundaryError,children:n})}class Me extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Fe="right";function ze(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Be(){const{toggle:e,shown:t}=(0,P.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,s.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(ze,{})})}const Ue={colorModeToggle:"colorModeToggle_a1Yr"};function $e(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(Me,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Ce,{...e})},t)))})}function qe(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function He(){const e=(0,P.e)(),t=(0,k.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Fe)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(qe,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Be,{}),(0,u.jsx)(G,{}),(0,u.jsx)($e,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)($e,{items:r}),(0,u.jsx)(V,{className:Ue.colorModeToggle}),!o&&(0,u.jsx)(ve,{children:(0,u.jsx)(be.Z,{})})]})})}function Ze(){return(0,u.jsx)(Ae,{children:(0,u.jsx)(He,{})})}function Ve(e){let{item:t}=e;const{to:n,href:r,label:o,prependBaseUrlToHref:a,...i}=t,l=(0,X.Z)(n),s=(0,X.Z)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...r?{href:a?s:r}:{to:l},...i,children:[o,r&&!(0,J.Z)(r)&&(0,u.jsx)(te.Z,{})]})}function We(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Ve,{item:t})},t.href??t.to)}function Ge(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(We,{item:e},t)))})]})}function Qe(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Ge,{column:e},t)))})}function Ke(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Ye(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Ve,{item:t})}function Xe(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Ye,{item:e}),t.length!==n+1&&(0,u.jsx)(Ke,{})]},n)))})})}function Je(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Qe,{columns:t}):(0,u.jsx)(Xe,{links:t})}var et=n(8984);const tt={footerLogoLink:"footerLogoLink_R2nM"};function nt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(et.Z,{className:(0,o.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function rt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:tt.footerLogoLink,target:t.target,children:(0,u.jsx)(nt,{logo:t})}):(0,u.jsx)(nt,{logo:t})}function ot(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function at(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function it(){const{footer:e}=(0,k.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(at,{style:o,links:n&&n.length>0&&(0,u.jsx)(Je,{links:n}),logo:r&&(0,u.jsx)(rt,{logo:r}),copyright:t&&(0,u.jsx)(ot,{copyright:t})})}const lt=r.memo(it),st=(0,L.Qc)([F.S,w.pl,N.OC,xe.L5,i.VC,function(e){let{children:t}=e;return(0,u.jsx)(A.n2,{children:(0,u.jsx)(P.M,{children:(0,u.jsx)(O,{children:t})})})}]);function ct(e){let{children:t}=e;return(0,u.jsx)(st,{children:t})}var ut=n(9290);function dt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(ut.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Ie,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(De,{error:t})})]})})})}const pt={mainWrapper:"mainWrapper_PUlq"};function ft(e){const{children:t,noFooter:n,wrapperClassName:r,title:l,description:s}=e;return(0,b.t)(),(0,u.jsxs)(ct,{children:[(0,u.jsx)(i.d,{title:l,description:s}),(0,u.jsx)(v,{}),(0,u.jsx)(j,{}),(0,u.jsx)(Ze,{}),(0,u.jsx)("div",{id:d,className:(0,o.Z)(g.k.wrapper.main,pt.mainWrapper,r),children:(0,u.jsx)(a.Z,{fallback:e=>(0,u.jsx)(dt,{...e}),children:t})}),!n&&(0,u.jsx)(lt,{})]})}},3747:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7800);var r=n(3497),o=n(8509),a=n(3020),i=n(8057),l=n(8984),s=n(1986);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.Z)(t.src),dark:(0,o.Z)(t.srcDark||t.src)},i=(0,s.jsx)(l.Z,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,s.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,a.Z)(),{navbar:{title:n,logo:l}}=(0,i.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.Z)(l?.href||"/"),m=n?"":t,h=l?.alt??m;return(0,s.jsxs)(r.Z,{to:f,...p,...l?.target&&{target:l.target},children:[l&&(0,s.jsx)(c,{logo:l,alt:h,imageClassName:u}),null!=n&&(0,s.jsx)("b",{className:d,children:n})]})}},5035:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);var r=n(7036),o=n(1986);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return(0,o.jsxs)(r.Z,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},8984:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7800),o=n(605),a=n(7638),i=n(859);const l={themedComponent:"themedComponent__aAy","themedComponent--light":"themedComponent--light_RYr8","themedComponent--dark":"themedComponent--dark_SlaT"};var s=n(1986);function c(e){let{className:t,children:n}=e;const c=(0,a.Z)(),{colorMode:u}=(0,i.I)();return(0,s.jsx)(s.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.Z)(t,l.themedComponent,l[`themedComponent--${e}`])});return(0,s.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,s.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,s.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},8134:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>b});var r=n(7800),o=n(4644),a=n(7539),i=n(6660),l=n(1986);const s="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??s}`,height:`${t}px`}}function l(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(l(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{l()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function m(e){if(!o.Z.canUseDOM)return e?u:d}function h(e){let{as:t="div",collapsed:n,children:o,animation:a,onCollapseTransitionEnd:i,className:s,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:a}),(0,l.jsx)(t,{ref:u,style:c?void 0:m(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:s,children:o})}function g(e){let{collapsed:t,...n}=e;const[o,i]=(0,r.useState)(!t),[s,c]=(0,r.useState)(t);return(0,a.Z)((()=>{t||i(!0)}),[t]),(0,a.Z)((()=>{o&&c(t)}),[o,t]),o?(0,l.jsx)(h,{...n,collapsed:s}):null}function b(e){let{lazy:t,...n}=e;const r=t?g:h;return(0,l.jsx)(r,{...n})}},7288:(e,t,n)=>{"use strict";n.d(t,{nT:()=>h,pl:()=>m});var r=n(7800),o=n(7638),a=n(9832),i=n(183),l=n(8057),s=n(1986);const c=(0,a.WA)("docusaurus.announcement.dismiss"),u=(0,a.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,o.Z)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,s.jsx)(f.Provider,{value:n,children:t})}function h(){const e=(0,r.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},859:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>g});var r=n(7800),o=n(4644),a=n(183),i=n(9832),l=n(8057),s=n(1986);const c=r.createContext(void 0),u="theme",d=(0,i.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>o.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),h=e=>{d.set(f(e))};function g(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[o,a]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&h(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,s.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new a.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},4755:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>b});var r=n(7800),o=n(4153),a=n(8963),i=n(8057),l=n(7746),s=n(183),c=n(9832),u=n(1986);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=r.createContext(null);function h(){const e=(0,o._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,l]=(0,r.useState)((()=>f(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=p.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=h();return(0,u.jsx)(m.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return l.cE?(0,u.jsx)(g,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function y(){const e=(0,r.useContext)(m);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=a.m);const t=(0,o.zh)(e),[n,i]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},7728:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>s});var r=n(7800),o=n(183),a=n(1986);const i=Symbol("EmptyContext"),l=r.createContext(i);function s(e){let{children:t,name:n,items:o}=e;const i=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(l.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(l);if(e===i)throw new o.i6("DocsSidebarProvider");return e}},4631:(e,t,n)=>{"use strict";n.d(t,{E:()=>s,q:()=>l});var r=n(7800),o=n(183),a=n(1986);const i=r.createContext(null);function l(e){let{children:t,version:n}=e;return(0,a.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(null===e)throw new o.i6("DocsVersionProvider");return e}},1875:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>m});var r=n(7800),o=n(1168),a=n(3181),i=n(2381),l=n(183);function s(e){!function(e){const t=(0,i.k6)(),n=(0,l.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(8057),u=n(1986);const d=r.createContext(void 0);function p(){const e=function(){const e=(0,o.HY)(),{items:t}=(0,c.L)().navbar;return 0===t.length&&!e.component}(),t=(0,a.i)(),n=!e&&"mobile"===t,[i,l]=(0,r.useState)(!1);s((()=>{if(i)return l(!1),!1}));const u=(0,r.useCallback)((()=>{l((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&l(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:i})),[e,n,u,i])}function f(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function m(){const e=r.useContext(d);if(void 0===e)throw new l.i6("NavbarMobileSidebarProvider");return e}},1168:(e,t,n)=>{"use strict";n.d(t,{HY:()=>s,Zo:()=>c,n2:()=>l});var r=n(7800),o=n(183),a=n(1986);const i=r.createContext(null);function l(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(!e)throw new o.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(i);if(!a)throw new o.i6("NavbarSecondaryMenuContentProvider");const[,l]=a,s=(0,o.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},6513:(e,t,n)=>{"use strict";n.d(t,{h:()=>o,t:()=>a});var r=n(7800);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},3181:(e,t,n)=>{"use strict";n.d(t,{i:()=>l});var r=n(7800),o=n(4644);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,l]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){l(function(e){if(!o.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},1329:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"}}},6660:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},7746:(e,t,n)=>{"use strict";n.d(t,{LM:()=>f,_F:()=>g,cE:()=>p,SN:()=>E,lO:()=>w,vY:()=>S,oz:()=>x,s1:()=>k,f:()=>y});var r=n(7800),o=n(2381),a=n(2251),i=n(4153),l=n(4755),s=n(4631),c=n(7728);function u(e){return Array.from(new Set(e))}var d=n(6239);const p=!!i._r;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const m=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),h=(e,t)=>e.some((e=>g(e,t)));function g(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||h(e.items,t))}function b(e,t){switch(e.type){case"category":return g(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||g(e,t);default:return!0}}function y(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,d.Mg)(a.href,n)||e(a.items))||"link"===a.type&&(0,d.Mg)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function k(){const e=(0,c.V)(),{pathname:t}=(0,o.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function w(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),o=(0,i.yW)(e);return(0,r.useMemo)((()=>u([t,n,o].filter(Boolean))),[t,n,o])}function x(e,t){const n=w(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=w(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function E(e){let{route:t}=e;const n=(0,o.TH)(),r=(0,s.E)(),i=t.routes,l=i.find((e=>(0,o.LX)(n.pathname,e)));if(!l)return null;const c=l.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,a.H)(i),sidebarName:c,sidebarItems:u}}},9603:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>m});var r=n(7800),o=n(605),a=n(7036),i=n(5247);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(8509),c=n(3020);var u=n(1986);function d(e){let{title:t,description:n,keywords:r,image:o,children:i}=e;const l=function(e){const{siteConfig:t}=(0,c.Z)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,s.C)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.Z,{children:[t&&(0,u.jsx)("title",{children:l}),t&&(0,u.jsx)("meta",{property:"og:title",content:l}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),l=(0,o.Z)(i,t);return(0,u.jsxs)(p.Provider,{value:l,children:[(0,u.jsx)(a.Z,{children:(0,u.jsx)("html",{className:l})}),n]})}function m(e){let{children:t}=e;const n=l(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.Z)(r,a),children:t})}},183:(e,t,n)=>{"use strict";n.d(t,{D9:()=>l,Qc:()=>u,Ql:()=>c,i6:()=>s,zX:()=>i});var r=n(7800),o=n(7539),a=n(1986);function i(e){const t=(0,r.useRef)(e);return(0,o.Z)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,r.useRef)();return(0,o.Z)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},6239:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7800),o=n(3905),a=n(3020);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,a.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.Z,baseUrl:e})),[e])}},9481:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>c,RF:()=>p});var r=n(7800),o=n(4644),a=n(7638),i=(n(7539),n(183)),l=n(1986);const s=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(s.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(s);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const d=()=>o.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),o=(0,r.useRef)(d()),a=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,a.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&ot&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},4798:(e,t,n)=>{"use strict";n.d(t,{HX:()=>r,os:()=>o});n(3020);const r="default";function o(e,t){return`docs-${e}-${t}`}},9832:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(7800);const r="localStorage";function o(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function a(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=a(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),o({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),o({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},6480:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(3020),o=n(2381),a=n(7339);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.Z)(),{pathname:s}=(0,o.TH)(),c=(0,a.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),u=l===i?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},1853:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7800),o=n(2381),a=n(183);function i(e){const t=(0,o.TH)(),n=(0,a.D9)(t),i=(0,a.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},8057:(e,t,n)=>{"use strict";n.d(t,{L:()=>o});var r=n(3020);function o(){return(0,r.Z)().siteConfig.themeConfig}},8582:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=void 0;const r=n(5237);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),l="/"===i||i===r?i:(s=i,n?o(s):a(s));var s;return e.replace(i,l)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a},7466:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},7339:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var o=n(8582);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(o).default}}),Object.defineProperty(t,"addTrailingSlash",{enumerable:!0,get:function(){return o.addTrailingSlash}}),Object.defineProperty(t,"addLeadingSlash",{enumerable:!0,get:function(){return o.addLeadingSlash}}),Object.defineProperty(t,"removeTrailingSlash",{enumerable:!0,get:function(){return o.removeTrailingSlash}});var a=n(5237);Object.defineProperty(t,"addPrefix",{enumerable:!0,get:function(){return a.addPrefix}}),Object.defineProperty(t,"removeSuffix",{enumerable:!0,get:function(){return a.removeSuffix}}),Object.defineProperty(t,"addSuffix",{enumerable:!0,get:function(){return a.addSuffix}}),Object.defineProperty(t,"removePrefix",{enumerable:!0,get:function(){return a.removePrefix}});var i=n(7466);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},5237:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=void 0,t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){return""===t?e:e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},3651:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=void 0;const r=n(9314);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),l="/"===i||i===r?i:(s=i,n?o(s):a(s));var s;return e.replace(i,l)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a},8950:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},5797:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var o=n(3651);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(o).default}}),Object.defineProperty(t,"addTrailingSlash",{enumerable:!0,get:function(){return o.addTrailingSlash}}),Object.defineProperty(t,"addLeadingSlash",{enumerable:!0,get:function(){return o.addLeadingSlash}}),Object.defineProperty(t,"removeTrailingSlash",{enumerable:!0,get:function(){return o.removeTrailingSlash}});var a=n(9314);Object.defineProperty(t,"addPrefix",{enumerable:!0,get:function(){return a.addPrefix}}),Object.defineProperty(t,"removeSuffix",{enumerable:!0,get:function(){return a.removeSuffix}}),Object.defineProperty(t,"addSuffix",{enumerable:!0,get:function(){return a.addSuffix}}),Object.defineProperty(t,"removePrefix",{enumerable:!0,get:function(){return a.removePrefix}});var i=n(8950);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},9314:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=void 0,t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){return""===t?e:e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},3905:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7800);var r=n(7173),o=n.n(r),a=n(6887);const i={"0145a656":[()=>n.e(3881).then(n.bind(n,2684)),"@site/docs/react/hooks/useImageStatus.mdx",2684],"0ac9f023":[()=>n.e(7672).then(n.bind(n,193)),"@site/docs/utils/validator/isNumber.md",193],"114d5267":[()=>n.e(8828).then(n.bind(n,7217)),"@site/docs/utils/object/omit.md",7217],"11738f66":[()=>n.e(4949).then(n.bind(n,7857)),"@site/docs/react/hooks/useResizeObserver.mdx",7857],"13eb7aa0":[()=>n.e(8913).then(n.bind(n,3940)),"@site/docs/utils/validator/isValidEmail.md",3940],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,9453)),"@theme/DocItem",9453],"1c24dc38":[()=>n.e(3899).then(n.bind(n,2210)),"@site/docs/utils/validator/isValidPhoneNumberFormat.md",2210],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,1418)),"@site/src/pages/index.tsx",1418],"219c5550":[()=>n.e(4291).then(n.bind(n,2462)),"@site/docs/utils/object/objectValues.md",2462],"2eff3e5b":[()=>n.e(4753).then(n.bind(n,1078)),"@site/docs/react/hooks/useToggle.mdx",1078],30200773:[()=>n.e(6863).then(n.bind(n,5641)),"@site/docs/utils/validator/isNullish.md",5641],"308b5f81":[()=>n.e(4580).then(n.bind(n,8777)),"@site/docs/react/hooks/useIntersectionObserver.mdx",8777],"3209f55a":[()=>n.e(4870).then(n.bind(n,2717)),"@site/docs/react/hooks/useAsyncPreservedCallback.mdx",2717],"3842c52b":[()=>n.e(8852).then(n.bind(n,9071)),"@site/docs/react/hooks/usePreservedCallback.mdx",9071],"3c17568f":[()=>n.e(8911).then(n.bind(n,3781)),"@site/docs/react/hooks/useIsMounted.mdx",3781],"3ffd14c6":[()=>n.e(2014).then(n.bind(n,9005)),"@site/docs/react/hooks/useOnClickOutside.mdx",9005],47707012:[()=>n.e(5917).then(n.bind(n,525)),"@site/docs/utils/object/objectEntries.md",525],"47a95eb2":[()=>n.e(410).then(n.bind(n,5777)),"@site/docs/react/components/DebounceWrapper.mdx",5777],"4fcbd706":[()=>n.e(1698).then(n.bind(n,4182)),"@site/docs/utils/string/repeatCharacters.md",4182],"52083c08":[()=>n.e(259).then(n.bind(n,178)),"@site/docs/utils/common/deepCopy.md",178],"525bfb2e":[()=>n.e(2917).then(n.bind(n,9396)),"@site/docs/utils/common/getViewportSize.md",9396],"53f54fd5":[()=>n.e(3883).then(n.bind(n,3072)),"@site/docs/utils/common/abRandom.md",3072],"54102c04":[()=>n.e(2269).then(n.bind(n,8503)),"@site/docs/react/components/LazyImage.mdx",8503],"5c9b0204":[()=>n.e(6331).then(n.bind(n,2490)),"@site/docs/utils/object/pick.md",2490],"5cdabd8b":[()=>n.e(8640).then(n.bind(n,7114)),"@site/docs/utils/string/removeSpecialCharacters.md",7114],"5d610355":[()=>n.e(1958).then(n.bind(n,9504)),"@site/docs/react/hooks/useInterval.mdx",9504],"5e95c892":[()=>n.e(9661).then(n.bind(n,9963)),"@theme/DocsRoot",9963],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"61a35b61":[()=>n.e(9034).then(n.bind(n,6855)),"@site/docs/react/hooks/useMediaQuery.mdx",6855],"61f7a55d":[()=>n.e(8953).then(n.bind(n,7895)),"@site/docs/react/hooks/useWindowScrollTo.mdx",7895],"67c089fb":[()=>n.e(3776).then(n.bind(n,3552)),"@site/docs/react/hooks/useDebounce.mdx",3552],"6b7ba1c1":[()=>n.e(4583).then(n.bind(n,8970)),"@site/docs/utils/common/hexToRgba.md",8970],"6bd54dd6":[()=>n.e(4168).then(n.bind(n,9018)),"@site/docs/react/hooks/useVisibilityChange.mdx",9018],"6dde689d":[()=>n.e(3030).then(n.bind(n,3999)),"@site/docs/react/hooks/useTimeout.mdx",3999],"73aec3a2":[()=>n.e(937).then(n.bind(n,3059)),"@site/docs/utils/string/formatNumberWithCommas.md",3059],"7475180a":[()=>n.e(9646).then(n.t.bind(n,5745,19)),"/home/runner/work/modern-kit/modern-kit/docs/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"764f42b2":[()=>n.e(5497).then(n.bind(n,1205)),"@site/docs/react/hooks/useMergeRefs.mdx",1205],"7d279fec":[()=>n.e(7647).then(n.bind(n,8856)),"@site/docs/react/hooks/useForceUpdate.mdx",8856],84604114:[()=>n.e(2311).then(n.bind(n,5502)),"@site/docs/utils/validator/hasProperty.md",5502],"8797c936":[()=>n.e(9247).then(n.bind(n,659)),"@site/docs/utils/device/isMobile.md",659],"90aeac69":[()=>n.e(4017).then(n.bind(n,5056)),"@site/docs/react/hooks/usePreservedState.mdx",5056],"90f5246c":[()=>n.e(2386).then(n.bind(n,3933)),"@site/docs/utils/object/deleteEmptyProperties.md",3933],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"993de3e1":[()=>n.e(3385).then(n.bind(n,5161)),"@site/docs/introduce/Introduce.md",5161],"9be130a4":[()=>n.e(5337).then(n.bind(n,6825)),"@site/docs/react/hooks/usePrevious.mdx",6825],"9e9c0b32":[()=>n.e(7167).then(n.bind(n,2422)),"@site/docs/utils/validator/isFuntion.md",2422],"9ea35591":[()=>n.e(5539).then(n.bind(n,4576)),"@site/docs/utils/validator/isNotNullish.md",4576],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,2513)),"@theme/DocVersionRoot",2513],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,6211)),"@theme/DocRoot",6211],abb91cfa:[()=>n.e(3980).then(n.bind(n,6297)),"@site/docs/utils/string/formatPhoneNumber.md",6297],ad000c78:[()=>n.e(9128).then(n.bind(n,7961)),"@site/docs/utils/device/isClient.md",7961],af3a3cdc:[()=>n.e(9263).then(n.t.bind(n,3769,19)),"/home/runner/work/modern-kit/modern-kit/docs/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],b35b1276:[()=>n.e(1813).then(n.bind(n,1213)),"@site/docs/react/components/When.mdx",1213],b3bf5b56:[()=>n.e(1175).then(n.bind(n,4037)),"@site/docs/react/hooks/useWindowSize.mdx",4037],b7504c90:[()=>n.e(6911).then(n.bind(n,3885)),"@site/docs/utils/string/countSubstringOccurrences.md",3885],bac0f70c:[()=>n.e(7893).then(n.bind(n,6751)),"@site/docs/utils/string/extractNumber.md",6751],bf0dbc92:[()=>n.e(8067).then(n.bind(n,843)),"@site/docs/react/components/InView.mdx",843],cbca3a13:[()=>n.e(2777).then(n.bind(n,1969)),"@site/docs/utils/common/getUniqTime.md",1969],cdcab0ad:[()=>n.e(3470).then(n.bind(n,7948)),"@site/docs/react/components/Portal.mdx",7948],d272ecc5:[()=>n.e(5380).then(n.bind(n,1415)),"@site/docs/utils/object/objectKeys.md",1415],d5af7a66:[()=>n.e(6002).then(n.bind(n,5032)),"@site/docs/utils/device/isSever.md",5032],db388e02:[()=>n.e(9576).then(n.bind(n,2879)),"@site/docs/react/hooks/useBlockPromiseMultipleClick.mdx",2879],dbd15680:[()=>n.e(7515).then(n.bind(n,1248)),"@site/docs/utils/common/noop.md",1248],dbf68f77:[()=>n.e(8862).then(n.bind(n,9685)),"@site/docs/react/hooks/useIsomorphicLayoutEffect.mdx",9685],e72e489d:[()=>n.e(5418).then(n.bind(n,4800)),"@site/docs/utils/common/asyncNoop.md",4800],eabfdb13:[()=>n.e(2627).then(n.bind(n,7763)),"@site/docs/react/hooks/useUnmount.mdx",7763],ee418e94:[()=>n.e(4142).then(n.bind(n,2588)),"@site/docs/utils/device/getOS.md",2588],f6dc8c23:[()=>n.e(324).then(n.bind(n,5065)),"@site/docs/utils/object/mergeProperties.md",5065],f717749c:[()=>n.e(8442).then(n.bind(n,727)),"@site/docs/utils/common/getUniqId.md",727],fa6a5d39:[()=>n.e(1900).then(n.bind(n,1644)),"@site/docs/utils/common/wrapInArray.md",1644],ff56c94b:[()=>n.e(5666).then(n.bind(n,7398)),"@site/docs/utils/common/deepEqual.md",7398]};var l=n(1986);function s(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(3821),u=n(5247);function d(e,t){if("*"===e)return o()({loading:s,loader:()=>n.e(2220).then(n.bind(n,2220)),modules:["@theme/NotFound"],webpack:()=>[2220],render(e,t){const n=e.default;return(0,l.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,c.Z)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const l=n.split(".");l.slice(0,-1).forEach((e=>{i=i[e]})),i[l[l.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;return delete o.__context,(0,l.jsx)(u.z,{value:i,children:(0,l.jsx)(a,{...o,...n})})}})}const p=[{path:"/modern-kit/",component:d("/modern-kit/","59a"),exact:!0},{path:"/modern-kit/docs",component:d("/modern-kit/docs","888"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","407"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","c6e"),routes:[{path:"/modern-kit/docs/introduce/",component:d("/modern-kit/docs/introduce/","975"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/DebounceWrapper",component:d("/modern-kit/docs/react/components/DebounceWrapper","4f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/InView",component:d("/modern-kit/docs/react/components/InView","ed4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/LazyImage",component:d("/modern-kit/docs/react/components/LazyImage","001"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Portal",component:d("/modern-kit/docs/react/components/Portal","356"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/When",component:d("/modern-kit/docs/react/components/When","ae9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback",component:d("/modern-kit/docs/react/hooks/useAsyncPreservedCallback","183"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick",component:d("/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","fd1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebounce",component:d("/modern-kit/docs/react/hooks/useDebounce","fab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useForceUpdate",component:d("/modern-kit/docs/react/hooks/useForceUpdate","b44"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useImageStatus",component:d("/modern-kit/docs/react/hooks/useImageStatus","934"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIntersectionObserver",component:d("/modern-kit/docs/react/hooks/useIntersectionObserver","9c5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useInterval",component:d("/modern-kit/docs/react/hooks/useInterval","05b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsMounted",component:d("/modern-kit/docs/react/hooks/useIsMounted","4b3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect",component:d("/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","6cd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMediaQuery",component:d("/modern-kit/docs/react/hooks/useMediaQuery","9ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMergeRefs",component:d("/modern-kit/docs/react/hooks/useMergeRefs","059"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useOnClickOutside",component:d("/modern-kit/docs/react/hooks/useOnClickOutside","0d5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedCallback",component:d("/modern-kit/docs/react/hooks/usePreservedCallback","d50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedState",component:d("/modern-kit/docs/react/hooks/usePreservedState","a46"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePrevious",component:d("/modern-kit/docs/react/hooks/usePrevious","eee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useResizeObserver",component:d("/modern-kit/docs/react/hooks/useResizeObserver","b26"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useTimeout",component:d("/modern-kit/docs/react/hooks/useTimeout","9e7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useToggle",component:d("/modern-kit/docs/react/hooks/useToggle","f90"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useUnmount",component:d("/modern-kit/docs/react/hooks/useUnmount","bb7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useVisibilityChange",component:d("/modern-kit/docs/react/hooks/useVisibilityChange","ca7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useWindowScrollTo",component:d("/modern-kit/docs/react/hooks/useWindowScrollTo","b6d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useWindowSize",component:d("/modern-kit/docs/react/hooks/useWindowSize","fb2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/abRandom",component:d("/modern-kit/docs/utils/common/abRandom","3dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/asyncNoop",component:d("/modern-kit/docs/utils/common/asyncNoop","9e5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/deepCopy",component:d("/modern-kit/docs/utils/common/deepCopy","56d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/deepEqual",component:d("/modern-kit/docs/utils/common/deepEqual","640"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqId",component:d("/modern-kit/docs/utils/common/getUniqId","a6f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqTime",component:d("/modern-kit/docs/utils/common/getUniqTime","a82"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getViewportSize",component:d("/modern-kit/docs/utils/common/getViewportSize","8b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/hexToRgba",component:d("/modern-kit/docs/utils/common/hexToRgba","0e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/noop",component:d("/modern-kit/docs/utils/common/noop","4e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/wrapInArray",component:d("/modern-kit/docs/utils/common/wrapInArray","345"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/getOS",component:d("/modern-kit/docs/utils/device/getOS","552"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isClient",component:d("/modern-kit/docs/utils/device/isClient","a60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isMobile",component:d("/modern-kit/docs/utils/device/isMobile","8dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isSever",component:d("/modern-kit/docs/utils/device/isSever","b65"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/deleteEmptyProperties",component:d("/modern-kit/docs/utils/object/deleteEmptyProperties","884"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mergeProperties",component:d("/modern-kit/docs/utils/object/mergeProperties","533"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectEntries",component:d("/modern-kit/docs/utils/object/objectEntries","87d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectKeys",component:d("/modern-kit/docs/utils/object/objectKeys","34e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectValues",component:d("/modern-kit/docs/utils/object/objectValues","e18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/omit",component:d("/modern-kit/docs/utils/object/omit","6fc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/pick",component:d("/modern-kit/docs/utils/object/pick","8b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/countSubstringOccurrences",component:d("/modern-kit/docs/utils/string/countSubstringOccurrences","c18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/extractNumber",component:d("/modern-kit/docs/utils/string/extractNumber","df0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/formatNumberWithCommas",component:d("/modern-kit/docs/utils/string/formatNumberWithCommas","327"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/formatPhoneNumber",component:d("/modern-kit/docs/utils/string/formatPhoneNumber","62c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/removeSpecialCharacters",component:d("/modern-kit/docs/utils/string/removeSpecialCharacters","e42"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/repeatCharacters",component:d("/modern-kit/docs/utils/string/repeatCharacters","f0a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/hasProperty",component:d("/modern-kit/docs/utils/validator/hasProperty","cd4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isFuntion",component:d("/modern-kit/docs/utils/validator/isFuntion","5bf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNotNullish",component:d("/modern-kit/docs/utils/validator/isNotNullish","196"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNullish",component:d("/modern-kit/docs/utils/validator/isNullish","c80"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNumber",component:d("/modern-kit/docs/utils/validator/isNumber","291"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidEmail",component:d("/modern-kit/docs/utils/validator/isValidEmail","6ac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat",component:d("/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","9a5"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"*",component:d("*")}]},674:(e,t,n)=>{"use strict";n.r(t)},3582:(e,t,n)=>{"use strict";n.r(t)},2568:(e,t,n)=>{"use strict";var r=n(7800),o=n(3061);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n