https://norr.vercel.app/_next/static/chunks/pages/hooks/use-click-outside-7a277dc0e3f0427a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[190],{1070:function(e,s,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-click-outside",function(){return o(5284)}])},5284:function(e,s,o){"use strict";o.r(s),o.d(s,{__toc:function(){return a}});var r=o(5893),n=o(2673),i=o(3058),t=o(3114);o(7954);var l=o(2643);let a=[{depth:2,value:"Usage",id:"usage"}];function c(e){let s=Object.assign({h1:"h1",p:"p",h2:"h2",pre:"pre",code:"code",span:"span"},(0,l.a)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{children:"useClickOutside()"}),"\n",(0,r.jsx)(s.p,{children:"Listening for clicks outside of a specified element."}),"\n",(0,r.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(s.pre,{"data-language":"tsx","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"tsx","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { MouseEvent "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ReactMouseEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" useRef } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { useClickOutside } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@norr/hooks'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Component"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"buttonRef"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useRef"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"handleClickOutside"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (event"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MouseEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'You clicked outside.'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" event);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"handleClickInside"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    event"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactMouseEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"HTMLButtonElement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MouseEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  ) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'You clicked inside.'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" event);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useClickOutside"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(buttonRef"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" handleClickOutside);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ref"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{buttonRef}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onClick"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{handleClickInside}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    >"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      Click me."})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  );"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.a)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"src/pages/hooks/use-click-outside.mdx",route:"/hooks/use-click-outside",pageMap:[{kind:"Meta",data:{"get-started":"Get started",components:"Components",hooks:"Hooks",utilities:"Utilities",typescript:"TypeScript",prettier:"Prettier",eslint:"ESLint",stylelint:"Stylelint"}},{kind:"Folder",name:"components",route:"/components",children:[{kind:"Meta",data:{overview:"Overview",modal:"Modal",portal:"Portal","trap-focus":"TrapFocus"}},{kind:"MdxPage",name:"modal",route:"/components/modal"},{kind:"MdxPage",name:"overview",route:"/components/overview"},{kind:"MdxPage",name:"portal",route:"/components/portal"},{kind:"MdxPage",name:"trap-focus",route:"/components/trap-focus"}]},{kind:"Folder",name:"eslint",route:"/eslint",children:[{kind:"Meta",data:{overview:"Overview","react-with-typescript":"React with TypeScript"}},{kind:"MdxPage",name:"overview",route:"/eslint/overview"},{kind:"MdxPage",name:"react-with-typescript",route:"/eslint/react-with-typescript"}]},{kind:"Folder",name:"get-started",route:"/get-started",children:[{kind:"Meta",data:{overview:"Overview"}},{kind:"MdxPage",name:"overview",route:"/get-started/overview"}]},{kind:"Folder",name:"hooks",route:"/hooks",children:[{kind:"Meta",data:{overview:"Overview","use-click-outside":"useClickOutside()","use-copy-to-cl

1ipboard":"useCopyToClipboard()","use-event-listener":"useEventListener()","use-interval":"useInterval()","use-is-browser":"useIsBrowser()","use-prevent-scroll":"usePreventScroll()","use-previous":"usePrevious()","use-window-resize":"useWindowResize()","use-window-size":"useWindowSize()"}},{kind:"MdxPage",name:"overview",route:"/hooks/overview"},{kind:"MdxPage",name:"use-click-outside",route:"/hooks/use-click-outside"},{kind:"MdxPage",name:"use-copy-to-clipboard",route:"/hooks/use-copy-to-clipboard"},{kind:"MdxPage",name:"use-event-listener",route:"/hooks/use-event-listener"},{kind:"MdxPage",name:"use-interval",route:"/hooks/use-interval"},{kind:"MdxPage",name:"use-is-browser",route:"/hooks/use-is-browser"},{kind:"MdxPage",name:"use-prevent-scroll",route:"/hooks/use-prevent-scroll"},{kind:"MdxPage",name:"use-previous",route:"/hooks/use-previous"},{kind:"MdxPage",name:"use-window-resize",route:"/hooks/use-window-resize"},{kind:"MdxPage",name:"use-window-size",route:"/hooks/use-window-size"}]},{kind:"Folder",name:"prettier",route:"/prettier",children:[{kind:"Meta",data:{overview:"Overview"}},{kind:"MdxPage",name:"overview",route:"/prettier/overview"}]},{kind:"Folder",name:"stylelint",route:"/stylelint",children:[{kind:"Meta",data:{overview:"Overview",emotion:"Emotion","styled-jsx":"styled-jsx"}},{kind:"MdxPage",name:"emotion",route:"/stylelint/emotion"},{kind:"MdxPage",name:"overview",route:"/stylelint/overview"},{kind:"MdxPage",name:"styled-jsx",route:"/stylelint/styled-jsx"}]},{kind:"Folder",name:"typescript",route:"/typescript",children:[{kind:"Meta",data:{overview:"Overview","partially-optional":"PartiallyOptional","partially-required":"PartiallyRequired","value-of":"ValueOf"}},{kind:"MdxPage",name:"overview",route:"/typescript/overview"},{kind:"MdxPage",name:"partially-optional",route:"/typescript/partially-optional"},{kind:"MdxPage",name:"partially-required",route:"/typescript/partially-required"},{kind:"MdxPage",name:"value-of",route:"/typescript/value-of"}]},{kind:"Folder",name:"utilities",route:"/utilities",children:[{kind:"Meta",data:{overview:"Overview","lower-case-first-letter":"lowerCaseFirstLetter()","is-ssr":"isSSR()","upper-case-first-letter":"upperCaseFirstLetter()"}},{kind:"MdxPage",name:"is-ssr",route:"/utilities/is-ssr"},{kind:"MdxPage",name:"lower-case-first-letter",route:"/utilities/lower-case-first-letter"},{kind:"MdxPage",name:"overview",route:"/utilities/overview"},{kind:"MdxPage",name:"upper-case-first-letter",route:"/utilities/upper-case-first-letter"}]}],flexsearch:{codeblocks:!0},title:"useClickOutside()",headings:a},pageNextRoute:"/hooks/use-click-outside",nextraLayout:i.ZP,themeConfig:t.Z};s.default=(0,n.j)(d)},3114:function(e,s,o){"use strict";var r=o(5893),n=o(5781);s.Z={primaryHue:179,primarySaturation:51,sidebar:{defaultMenuCollapseLevel:1,autoCollapse:!0},logo:(0,r.jsx)(n.TR,{}),project:{link:"https://github.com/gunnarx2/norr"},docsRepositoryBase:"https://github.com/gunnarx2/norr/tree/master/",useNextSeoProps:()=>({titleTemplate:"%s - NORR"}),head:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"description",content:"Norr is just another monorepo with a bunch of packages"}),(0,r.jsx)("meta",{property:"og:title",content:"NORR"}),(0,r.jsx)("meta",{property:"og:description",content:"Norr is just another monorepo with a bunch of packages"}),(0,r.jsx)("link",{href:"/apple-touch-icon.png",rel:"apple-touch-icon"}),(0,r.jsx)("link",{href:"/favicon-light-mode.png",rel:"icon"}),(0,r.jsx)("link",{href:"/favicon-light-mode.png",rel:"icon",media:"(prefers-color-scheme: light)"}),(0,r.jsx)("link",{href:"/favicon-dark-mode.png",rel:"icon",media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("meta",{property:"og:image",content:"/og.png"}),(0,r.jsx)("meta",{property:"og:url",content:"https://norr.vercel.app/"}),(0,r.jsx)("meta",{name:"apple-mobile-web-app-title",content:"NORR"})]}),editLink:{component:()=>null},feedback:{content:null},footer:{component:null},darkMode:!1,nextThemes:{defaultTheme:"dark"}}}},function(e){e.O(0,[414,774,888,179],function(){return e(e.s=1070)}),_N_E=e.O()}]);