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 browserssr
Server-side rendering: Generate an HTML string (typically on the server)hydrate
Hydration: use this to add interactivity to an SSRed Leptos appstable
By default, Leptos requiresnightly
Rust, which is what allows the ergonomics of calling signals as functions. Enable this feature to supportstable
Rust.
Important Note: You must enable one of csr
, hydrate
, or ssr
to tell Leptos
which mode your app is operating in.
Structs
A function that is applied to the text value before setting
document.title
.Props for the [
Link
] component.Builder for
LinkProps
instances.Contains the current state of meta tags. To access it, you can use use_head.
Builder for
MetaProps
instances.Props for the [
Script
] component.Builder for
ScriptProps
instances.Props for the [
Style
] component.Builder for
StyleProps
instances.Props for the
Stylesheet
component.Builder for
StylesheetProps
instances.Contains the current state of the document’s
<title>
.Props for the [
Title
] component.Builder for
TitleProps
instances.Functions
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.