Crate leptos_meta

Expand description

§Leptos Meta

Leptos Meta allows you to modify content in a document’s <head> from within components using the Leptos web framework.

Document metadata is updated automatically when running in the browser. For server-side rendering, after the component tree is rendered to HTML, [MetaContext::dehydrate] can generate HTML that should be injected into the <head> of the HTML document being rendered.

use leptos::*;
use leptos_meta::*;

#[component]
fn MyApp() -> impl IntoView {
    // Provides a [`MetaContext`], if there is not already one provided.
    provide_meta_context();

    let (name, set_name) = create_signal("Alice".to_string());

    view! {
      <Title
        // reactively sets document.title when `name` changes
        text=move || name.get()
        // applies the `formatter` function to the `text` value
        formatter=|text| format!("“{text}” is your name")
      />
      <main>
        <input
          prop:value=move || name.get()
          on:input=move |ev| set_name.set(event_target_value(&ev))
        />
      </main>
    }
}

§Feature Flags

csr Client-side rendering: Generate DOM nodes in the browser
ssr Server-side rendering: Generate an HTML string (typically on the server)
hydrate Hydration: use this to add interactivity to an SSRed Leptos app
stable By default, Leptos requires nightly Rust, which is what allows the ergonomics of calling signals as functions. Enable this feature to support stable Rust.

Important Note: You must enable one of csr, hydrate, or ssr to tell Leptos which mode your app is operating in.

Structs§

BodyContext
Contains the current metadata for the document’s <body>.
BodyProps
Props for the Body component.
Formatter
A function that is applied to the text value before setting document.title.
HtmlContext
Contains the current metadata for the document’s <html>.
HtmlProps
Props for the Html component.
LinkProps
Props for the Link component.
MetaContext
Contains the current state of meta tags. To access it, you can use use_head.
MetaProps
Props for the Meta component.
MetaTagsContext
Manages all of the element created by components.
ScriptProps
Props for the Script component.
StyleProps
Props for the Style component.
StylesheetProps
Props for the Stylesheet component.
TitleContext
Contains the current state of the document’s <title>.
TitleProps
Props for the Title component.

Functions§

Body
A component to set metadata on the document’s <body> element from within the application.
Html
A component to set metadata on the document’s <html> element from within the application.
Link
Injects an HTMLLinkElement into the document head, accepting any of the valid attributes for that tag.
Meta
Injects an HTMLMetaElement into the document head to set metadata
Script
Injects an HTMLScriptElement into the document head, accepting any of the valid attributes for that tag.
Style
Injects an HTMLStyleElement into the document head, accepting any of the valid attributes for that tag.
Stylesheet
Injects an HTMLLinkElement into the document head that loads a stylesheet from the URL given by the href property.
Title
A component to set the document’s title by creating an HTMLTitleElement.
provide_meta_context
Provides a MetaContext, if there is not already one provided. This ensures that you can provide it at the highest possible level, without overwriting a MetaContext that has already been provided (for example, by a server-rendering integration.)
use_head
Returns the current MetaContext.