Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

switch to a Document trait and introduce Script/Head/Style/Meta components #2635

Merged
merged 16 commits into from
Jul 18, 2024

Conversation

ealmloff
Copy link
Member

@ealmloff ealmloff commented Jul 17, 2024

This PR adds support for a few special elements in dioxus that render into the head:

  • Title
  • Meta
  • head::Link
  • Script
  • Style

Each of these components can be used to add extra information to the head of the page. For example, you can use the Title component to set the title of the page, or the Meta component to add extra metadata to the page.

Limitations

Components that render into the head of the page do have a few key limitations:

  • With the exception of the Title component, all components that render into the head cannot be modified after the first time they are rendered.
  • Components that render into the head will not be removed even after the component is removed from the tree.

Example

# use dioxus::prelude::*;
fn RedirectToDioxusHomepageWithoutJS() -> Element {
    rsx! {
        // You can use the meta component to render a meta tag into the head of the page
        // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds
        Meta {
            http_equiv: "refresh",
            content: "10;url=https://dioxuslabs.com",
        }
    }
}

Fullstack Rendering

Head components are compatible with fullstack rendering, but only head components that are rendered in the initial render (before suspense boundaries resolve) will be rendered into the head.

If you have any important metadata that you want to render into the head, it needs to be rendered outside of any pending suspense boundaries.

# use dioxus::prelude::*;
# #[component]
# fn LoadData(children: Element) -> Element { unimplemented!() }
fn App() -> Element {
    rsx! {
        // This will render in SSR
        Title { "My Page" }
        SuspenseBoundary {
            fallback: |_| rsx! { "Loading..." },
            LoadData {
                // This will only be rendered on the client after hydration so it may not be visible to search engines
                Meta { name: "description", content: "My Page" }
            }
        }
    }
}

Closes #1169

TODO:

  • Web
  • Desktop
  • Liveview
  • SSR
  • Fullstack
  • Docs

@ealmloff ealmloff added enhancement New feature or request breaking This is a breaking change html Related to the html crate labels Jul 17, 2024
@ealmloff ealmloff marked this pull request as ready for review July 18, 2024 01:12
@ealmloff ealmloff merged commit 176e67e into DioxusLabs:main Jul 18, 2024
9 of 10 checks passed
@ealmloff ealmloff deleted the title-element branch July 18, 2024 01:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking This is a breaking change enhancement New feature or request html Related to the html crate
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Special elements head and body
2 participants