var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!y.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(t=b(e,r))||t.enumerable});return n};var N=(n,e,l)=>(l=n!=null?p(v(n)):{},o(e||!n||!n.__esModule?s(l,"default",{value:n,enumerable:!0}):l,n)),g=n=>o(s({},"__esModule",{value:!0}),n);var i=u((M,c)=>{c.exports=_jsx_runtime});var w={};k(w,{default:()=>h,frontmatter:()=>f});var a=N(i()),f=void 0;function d(n){let e={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",span:"span",...n.components},{EpicVideo:l}=e;return l||D("EpicVideo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:"Portals"}),` `,(0,a.jsx)(l,{url:"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-portals"}),` `,(0,a.jsxs)(e.p,{children:[`There are a variety of UI patterns that require a component render some part of its UI that appears outside of the component's normal DOM hierarchy. For example, a modal dialog might need to render its contents at the root of the document, or a tooltip might need to render its contents at the end of the `,(0,a.jsx)(e.code,{children:"body"}),` element. Typically this is for the purpose of layering or positioning content above other content.`]}),` `,(0,a.jsxs)(e.p,{children:["You could imperatively add a ",(0,a.jsx)(e.code,{children:"useEffect"}),` that creates a DOM node yourself, appends it to the document, and then removes it when the component unmounts. However, this is a common enough pattern that React provides a built-in way to do this with the `,(0,a.jsx)(e.code,{children:"ReactDOM.createPortal"})," method."]}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"import"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"createPortal"})," } ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"from"})," ","'",(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"react-dom"}),"'",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"2",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"Modal"}),"({",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"title"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"content"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"handleClose"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:["}",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"title"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"content"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"handleClose"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," () ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"void"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:["}) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"12",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"createPortal"}),"(",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"13",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"className"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"modal"}),'"',">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"14",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"h1"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"title"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"15",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"p"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"content"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"16",children:[" ,",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"17",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"document"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"body"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"18",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"20",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"App"}),"() {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"showModal"}),", ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"setShowModal"}),"] ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"React"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base09)"},children:"false"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"23",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"() ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setShowModal"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base09)"},children:"true"}),")",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">Show Modal",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"showModal"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"&&"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Modal"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"title"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"My Modal"}),'"',` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"content"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),'"',(0,a.jsx)(e.span,{style:{color:"var(--base0B)"},children:"This is the content of the modal"}),'"',` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"31",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"handleClose"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"() ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setShowModal"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base09)"},children:"false"}),")",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"32",children:[" />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"33",children:[" )",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"34",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"35",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"36",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`The first argument is the UI you want rendered (which has access to props, state, whatever) and the second argument is the DOM node you want to render it to. In this case, we're rendering the modal to the `,(0,a.jsx)(e.code,{children:"body"})," element."]}),` `,(0,a.jsxs)(e.p,{children:["\u{1F4DC} Learn more from ",(0,a.jsxs)(e.a,{href:"https://react.dev/reference/react-dom/createPortal",children:["the ",(0,a.jsx)(e.code,{children:"createPortal"})," docs"]})]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function D(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(w);})(); ;return Component;

05. Portals/Elaboration