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.
node or any html elements.
Name
default
The default slot.
Below is a collection of simple to complex examples.
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
Intersection
Next
Scroll Indicator
Scroll Indicator
SELECT YOUR FRAMEWORK
React