Portal

Renders a subtree in a different part of the DOM.

Features

• Render any subtree outside of your App.
• Appends to document.body by default but can be customized to use a different container.

Installation

Install the component from your command line.

# CSR
cargo add radix-leptos-portal --features csr

# Hydrate
cargo add radix-leptos-portal --features hydrate

# SSR
cargo add radix-leptos-portal --features ssr

cargo add radix-yew-portal

Anatomy

Import the component.

use leptos::*;
use radix_leptos_portal::Portal;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Portal />
    }
}

use radix_yew_portal::Portal;
use yew::prelude::*;

#[function_component]
fn Anatomy() -> Html {
    html! {
        <Portal />
    }
}

API Reference

Root

Anything you put inside this component will be rendered in a separate <div> element. By default, this element will be appended to document.body but you can choose a different container by using the container or container_ref prop.

Example

Use the portal primitive.

use leptos::*;
use radix_leptos_portal::Portal;

#[component]
fn Example() -> impl IntoView {
    view! {
        <Portal>Content</Portal>
    }
}

use radix_yew_portal::Portal;
use yew::prelude::*;

#[function_component]
fn Example() -> Html {
    html! {
        <Portal>{"Content"}</Portal>
    }
}

See Also

• Radix documentation