🌌 preact-portal 🌠
Preact components into SPACE*
Render* a space in the DOM. Sorry.
Use this if you have a component that needs to render children into some other place in the DOM.
An example of this would be modal dialogs, where you may need to render
<Dialog />
into<body>
.
Demo #1 | Demo #2 |
---|---|
Moving around the DOM by changing into . |
Open a full-page modal from within a thumbnail. |
![]() |
![]() |
Installation
Via npm:
npm install --save preact-portal
Usage
;; this; this; { return <div class="thumb" onClick=thisopen> <img src=url /> open ? <Portal into="body"> <div class="popup" onClick=thisclose> <img src=url /> </div> </Portal> : null </div> ; } ;
Or, wrap up a very common case into a simple high order function:
const Popup = open ? <Portal into=into> children </Portal> : null; // Example: show popup on error. { return <form> <Popup open=error> <p>Error: error</p> </Popup> ...etc </form> ; }