Portals
How to think about portals?
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
yew::create_portal(child, host)
returns a Html
value that renders child
not hierarchically under its parent component,
but as a child of the host
element.
Usage
Typical uses of portals can include modal dialogs and hovercards, as well as more technical applications such as controlling the contents of an element's shadowRoot
, appending stylesheets to the surrounding document's <head>
and collecting referenced elements inside a central <defs>
element of an <svg>
.
Note that yew::create_portal
is a rather low-level building block, on which other components should be built that provide the interface for your specific use case. As an example, here is a simple modal dialogue that renders its children
into an element outside yew
's control, identified by the id="modal_host"
.
use yew::{html, create_portal, function_component, Children, Properties};
#[derive(Properties, PartialEq)]
pub struct ModalProps {
#[prop_or_default]
pub children: Children,
}
#[function_component(Modal)]
fn modal(props: &ModalProps) -> Html {
let modal_host = gloo_utils::document()
.get_element_by_id("modal_host")
.expect("a #modal_host element");
create_portal(
html!{ {for props.children.iter()} },
modal_host.into(),
)
}