HTMLPLUS

Portal
Experimental

With a portal, you can render a component in a different place in the DOM tree,
even if this place is not in your app's scope. Portals are very handy when working
with modals, notifications, popups or other elements that are sensitive to where
they're placed in the DOM tree.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusPortal

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
disabled
Type
booleanboolean
Default
undefined
Disables the portal.
Name
strategy
Type
"after" | "append" | "before" | "prepend""after" | "append" | "before" | "prepend"
Default
'append'
Specifies the position of the portal content relative to the target.
Name
target
Type
Node | stringNode | string
Default
'body'
Specifies the position of the portal content, It Can include css selectors,
node or any html elements.
Name
default
The default slot.

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Portal } from "@htmlplus/react";

const App = () => {
  return <>    
    <div id="target"></div>    
    <div id="source">      
      <Portal target="#target">        
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
        </p>        
      </Portal>      
    </div>    
  </>;
};

export default App;
#target { color: blue }
#source { color: red  }
Contributors
Prev
Intersection
Next
Scroll Indicator
SELECT YOUR FRAMEWORK
React logo
React