Crate leptos_meta

source ·
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(cx: Scope) -> impl IntoView {
    let (name, set_name) = create_signal(cx, "Alice".to_string());

    view! { cx,
      <Title
        // reactively sets document.title when `name` changes
        text=name
        // applies the `formatter` function to the `text` value
        formatter=|text| format!("“{text}” is your name")
      />
      <main>
        <input
          prop:value=name
          on:input=move |ev| set_name(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

Contains the current metadata for the document’s <body>.
Props for the Body component.
Builder for BodyProps instances.
A function that is applied to the text value before setting document.title.
Contains the current metadata for the document’s <html>.
Props for the Html component.
Builder for HtmlProps instances.
Props for the Link component.
Builder for LinkProps instances.
Contains the current state of meta tags. To access it, you can use use_head.
Props for the Meta component.
Builder for MetaProps instances.
Manages all of the element created by components.
Props for the Script component.
Builder for ScriptProps instances.
Props for the Style component.
Builder for StyleProps instances.
Props for the Stylesheet component.
Describes a value that is either a static or a reactive string, i.e., a String, a &str, or a reactive Fn() -> String.
Contains the current state of the document’s <title>.
Props for the Title component.
Builder for TitleProps instances.

Functions

A component to set metadata on the document’s <body> element from within the application.
A component to set metadata on the document’s <html> element from within the application.
Injects an HTMLLinkElement into the document head, accepting any of the valid attributes for that tag.
Injects an HTMLMetaElement into the document head to set metadata
Injects an HTMLScriptElement into the document head, accepting any of the valid attributes for that tag.
Injects an HTMLStyleElement into the document head, accepting any of the valid attributes for that tag.
Injects an HTMLLinkElement into the document head that loads a stylesheet from the URL given by the href property.
A component to set the document’s title by creating an HTMLTitleElement.
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.)
Returns the current MetaContext.