use_css_var

Manipulate CSS variables.

Demo

Usage

use leptos::prelude::*;
use leptos_use::use_css_var;

#[component]
fn Demo() -> impl IntoView {
let (color, set_color) = use_css_var("--color");

set_color.set("red".to_string());

view! { }
}

The variable name itself can be a Signal.

use leptos::prelude::*;
use leptos_use::use_css_var;

#[component]
fn Demo() -> impl IntoView {
let (key, set_key) = signal("--color".to_string());
let (color, set_color) = use_css_var(key);

view! { }
}

You can specify the element that the variable is applied to as well as an initial value in case the variable is not set yet. The option to listen for changes to the variable is also available.

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{use_css_var_with_options, UseCssVarOptions};

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();

let (color, set_color) = use_css_var_with_options(
    "--color",
    UseCssVarOptions::default()
        .target(el)
        .initial_value("#eee")
        .observe(true),
);

view! {
    <div node_ref=el>"..."</div>
}
}

Server-Side Rendering

On the server this simply returns signal(options.initial_value).

Feature

This function is only available if the crate feature use_css_var is enabled

Types

• struct UseCssVarOptions

Source

Source • Demo • Docs