mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
90b4e55ebc
* change suffixes from md to mdx fix broken links for English locale tree shake and update docusaurus add docusaurus ideal image plugin use svg and themed image delete unused static asset * move localized landing page * change GitLocalize project page * nit pick * remove ignore to have the block checked
42 lines
1.7 KiB
Plaintext
42 lines
1.7 KiB
Plaintext
---
|
|
title: "Portals"
|
|
description: "Rendering into out-of-tree DOM nodes"
|
|
---
|
|
|
|
## 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`](https://developer.mozilla.org/en-US/docs/Web/API/Element/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"`.
|
|
|
|
```rust
|
|
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(),
|
|
)
|
|
}
|
|
```
|
|
|
|
## Further reading
|
|
- [Portals example](https://github.com/yewstack/yew/tree/master/examples/portals)
|