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) -> Element {
  let (name, set_name) = create_signal(cx, "Alice".to_string());

  view! { cx,
    <main>
      <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")
      />
      <input
        prop:value=name
        on:input=move |ev| set_name(event_target_value(&ev))
      />
    </main>
  }

}

Structs

A function that is applied to the text value before setting document.title.
Contains the current state of meta tags. To access it, you can use use_head.
Manages all of the stylesheets set by Stylesheet components.
Properties 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>.
Properties for the Title component.

Functions

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.
Returns the current MetaContext.