Leptos-Use

https://leptos-use.rs
Admin
Leptos-Use is a collection of essential utilities for Leptos, inspired by similar libraries like...
Tokens:142,628
Snippets:1,149
Trust Score:5.2
Update:8 hours ago
Show doc for...
Tokens:
Raw
### use_user_media usage example in Rust

Source: https://leptos-use.rs/browser/use_user_media.html

Example component demonstrating how to use `use_user_media` to get a media stream and display it in a video element. The `start` function is called to begin the stream, and an effect updates the video source when the stream becomes available. On the server, calls to `start` are ignored and the stream is always `None`.

```rust
use leptos::prelude::*;
use leptos::logging::{log, error};
use leptos_use_user_media::{use_user_media, UseUserMediaReturn};

#[component]
fn Demo() -> impl IntoView {
let video_ref = NodeRef::<leptos::html::Video>::new();

let UseUserMediaReturn { stream, start, .. } = use_user_media();

start();

Effect::new(move |_|
    video_ref.get().map(|v| {
        match stream.get() {
            Some(Ok(s)) => v.set_src_object(Some(&s)),
            Some(Err(e)) => error!("Failed to get media stream: {:?}", e),
            None => log!("No stream yet"),
        }
    })
);

view! { <video node_ref=video_ref controls=false autoplay=true muted=true></video> }
}
```

--------------------------------

### Rust usage example for use_display_media

Source: https://leptos-use.rs/browser/use_display_media.html

Shows how to use `use_display_media` in a Leptos component. It creates a video element, starts the stream, and updates the video source based on the stream state. The `start` closure must be called from the same thread that called `use_display_media`.

```rust
use leptos::prelude::*;
use leptos::logging::{log, error};
use leptos_use_display_media::{use_display_media, UseDisplayMediaReturn};

#[component]
fn Demo() -> impl IntoView {
let video_ref = NodeRef::<leptos::html::Video>::new();

let UseDisplayMediaReturn { stream, start, .. } = use_display_media();

start();

Effect::new(move |_|
    video_ref.get().map(|v| {
        match stream.get() {
            Some(Ok(s)) => v.set_src_object(Some(&s)),
            Some(Err(e)) => error!("Failed to get media stream: {:?}", e),
            None => log!("No stream yet"),
        }
    })
);

view! { <video node_ref=video_ref controls=false autoplay=true muted=true></video> }
}
```

--------------------------------

### Installation

Source: https://leptos-use.rs/storage/use_local_storage.html

Command to add the leptos-use-storage crate to a Cargo project.

```APIDOC
## Installation

```shell
cargo add leptos-use-storage
```
```

--------------------------------

### Installation command for leptos-use-device-pixel-ratio

Source: https://leptos-use.rs/sensors/use_device_pixel_ratio.html

Adds the leptos-use-device-pixel-ratio crate to a Cargo project.

```shell
cargo add leptos-use-device-pixel-ratio
```

--------------------------------

### Installation with cargo add

Source: https://leptos-use.rs/reactivity/sync_signal.html

Adds the leptos-use-sync-signal crate to your project.

```shell
cargo add leptos-use-sync-signal
```

--------------------------------

### Install leptos-use-interval with cargo add

Source: https://leptos-use.rs/animation/use_interval.html

Adds the `leptos-use-interval` crate to a Leptos project. This is the recommended way to install the crate.

```shell
cargo add leptos-use-interval
```

--------------------------------

### Installation with cargo add

Source: https://leptos-use.rs/sensors/on_click_outside.html

Adds the leptos-use-on-click-outside crate to your project.

```shell
cargo add leptos-use-on-click-outside
```

--------------------------------

### Usage example for use_to_string

Source: https://leptos-use.rs/utilities/use_to_string.html

Shows how to use `use_to_string` to reactively convert a signal value to a string. The example creates a signal with a f64 value and passes it to `use_to_string`, which returns a reactive string.

```rust
use leptos::prelude::*;
use leptos_use_to_string::use_to_string;

#[component]
fn Demo() -> impl IntoView {
let (number, set_number) = signal(3.14_f64);
let str = use_to_string::<_, f64>(number);

view! { }
}
```

--------------------------------

### Installation

Source: https://leptos-use.rs/component/use_calendar.html

Command to add the leptos-use-calendar crate to a Cargo project.

```APIDOC
## Installation

```shell
cargo add leptos-use-calendar
```
```

--------------------------------

### Installation

Source: https://leptos-use.rs/browser/use_cookie.html

Add the leptos-use-cookie crate to your Cargo.toml.

```APIDOC
## Installation

```shell
cargo add leptos-use-cookie
```
```

--------------------------------

### Installation with cargo add

Source: https://leptos-use.rs/animation/use_timestamp.html

Adds the `leptos-use-timestamp` crate to the project.

```shell
cargo add leptos-use-timestamp
```

--------------------------------

### Installation

Source: https://leptos-use.rs/sensors/use_scroll.html

Command to add the leptos-use-scroll crate to a Cargo project.

```APIDOC
## Installation

```shell
cargo add leptos-use-scroll
```
```

--------------------------------

### Install leptos-use-math

Source: https://leptos-use.rs/math/use_and.html

Adds the leptos-use-math crate as a dependency to a Cargo project.

```shell
cargo add leptos-use-math
```

--------------------------------

### Installation command for leptos-use-media-query

Source: https://leptos-use.rs/browser/use_media_query.html

Adds the leptos-use-media-query crate as a dependency using cargo add.

```shell
cargo add leptos-use-media-query
```

--------------------------------

### use_timeout_fn usage example in Rust

Source: https://leptos-use.rs/animation/use_timeout_fn.html

Shows how to use use_timeout_fn in a Leptos component. The function takes a callback and a timeout in milliseconds, returning start, stop, and is_pending. Calling start with an argument triggers the callback after the timeout.

```rust
use leptos::prelude::*;
use leptos_use_timeout_fn::{use_timeout_fn, UseTimeoutFnReturn};

#[component]
fn Demo() -> impl IntoView {
let UseTimeoutFnReturn { start, stop, is_pending, .. } = use_timeout_fn(
    |i: i32| {
        // do sth
    },
    3000.0
);

start(3);

view! { }
}
```

--------------------------------

### Install leptos-use-textarea-autosize

Source: https://leptos-use.rs/browser/use_textarea_autosize.html

Command to add the crate as a dependency using cargo.

```shell
cargo add leptos-use-textarea-autosize
```

--------------------------------

### Installation command for leptos-use-display-media

Source: https://leptos-use.rs/browser/use_display_media.html

Adds the `leptos-use-display-media` crate to the project using Cargo.

```shell
cargo add leptos-use-display-media
```

--------------------------------

### Install leptos-use-css-var

Source: https://leptos-use.rs/browser/use_css_var.html

Command to add the leptos-use-css-var crate as a dependency using cargo.

```shell
cargo add leptos-use-css-var
```

--------------------------------

### Locale-specific formatting with use_intl_number_format

Source: https://leptos-use.rs/intl/use_intl_number_format.html

Shows how to specify locales to get localized number formats. Includes examples for German, Arabic (Egypt), Indian, Chinese decimal, and a fallback locale for Balinese. Each example uses the locale or locales option and formats a fixed number.

```rust
use leptos::prelude::*;
use leptos_use_intl_number_format::{use_intl_number_format, UseIntlNumberFormatOptions};

#[component]
fn Demo() -> impl IntoView {
let number = 123456.789_f32;

// German uses comma as decimal separator and period for thousands
let number_format = use_intl_number_format(
    UseIntlNumberFormatOptions::default().locale("de-DE"),
);
let formatted = number_format.format::<f32>(number); // 123.456,789

// Arabic in most Arabic speaking countries uses real Arabic digits
let number_format = use_intl_number_format(
    UseIntlNumberFormatOptions::default().locale("ar-EG"),
);
let formatted = number_format.format::<f32>(number); // ١٢٣٤٥٦٫٧٨٩

// India uses thousands/lakh/crore separators
let number_format = use_intl_number_format(
    UseIntlNumberFormatOptions::default().locale("en-IN"),
);
let formatted = number_format.format::<f32>(number); // 1,23,456.789

// the nu extension key requests a numbering system, e.g. Chinese decimal
let number_format = use_intl_number_format(
    UseIntlNumberFormatOptions::default().locale("zh-Hans-CN-u-nu-hanidec"),
);
let formatted = number_format.format::<f32>(number); // 一二三,四五六.七八九

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
let number_format = use_intl_number_format(
    UseIntlNumberFormatOptions::default().locales(vec!["ban".to_string(), "id".to_string()]),
);
let formatted = number_format.format::<f32>(number); // 123.456,789


view! { }
}
```

--------------------------------

### Installation command for leptos-use-to-string

Source: https://leptos-use.rs/utilities/use_to_string.html

Adds the `leptos-use-to-string` crate to the project using Cargo.

```shell
cargo add leptos-use-to-string
```

--------------------------------

### Usage example for is_ok

Source: https://leptos-use.rs/utilities/is_ok.html

Shows how to use is_ok with a signal that holds a Result. The signal is created with a random Ok or Err value, and is_ok is called on it to get a reactive boolean.

```rust
use leptos::prelude::*;
use leptos_use_is::is_ok;

#[component]
fn Demo() -> impl IntoView {
let (example, set_example) = signal(
    if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) }
);

let is_ok = is_ok(example);

view! { }
}
```

--------------------------------

### Rust usage example for use_window_scroll

Source: https://leptos-use.rs/elements/use_window_scroll.html

Imports the `use_window_scroll` function and uses it inside a Leptos component to get reactive scroll coordinates `(x, y)`. On the server, the returned signals are always `0.0`.

```rust
use leptos::prelude::*;
use leptos_use_window_scroll::use_window_scroll;

#[component]
fn Demo() -> impl IntoView {
let (x, y) = use_window_scroll();

view! { }
}
```

--------------------------------

### Rust: Use header function to get HTTP header value

Source: https://leptos-use.rs/utilities/header.html

Server-side only. Requires the `ssr` feature plus either `axum` or `actix`. The example retrieves the `CONTENT_LENGTH` header using `http::header::CONTENT_LENGTH`.

```rust
#![allow(unused)]
fn main() {
use leptos_use_header::header;

let content_len = header(http::header::CONTENT_LENGTH);
}
```

--------------------------------

### Installation command for leptos-use-signal-debounce-throttle

Source: https://leptos-use.rs/reactivity/signal_debounced.html

Adds the crate to your project using cargo add.

```shell
cargo add leptos-use-signal-debounce-throttle
```

--------------------------------

### Basic usage of use_intl_datetime_format

Source: https://leptos-use.rs/intl/use_intl_datetime_format.html

Formats a `chrono::DateTime` using default locale and options. The example creates a signal for the date and uses `UseIntlDateTimeFormatOptions::default()` to get a formatted string like "12/20/2020" in US English.

```rust
use leptos::prelude::*;
use leptos_use_intl_datetime_format::{use_intl_datetime_format, UseIntlDateTimeFormatOptions};
use chrono::{TimeZone, Utc};

#[component]
fn Demo() -> impl IntoView {
let (date, set_date) = signal(Utc.with_ymd_and_hms(2020, 12, 20, 3, 23, 16).unwrap());

let date_time_format = use_intl_datetime_format(UseIntlDateTimeFormatOptions::default());

let formatted = date_time_format.format(date); // "12/20/2020" if in US English locale

view! { }
}
```

--------------------------------

### Install leptos-use-window-focus with cargo

Source: https://leptos-use.rs/elements/use_window_focus.html

Adds the leptos-use-window-focus crate as a dependency using cargo add.

```shell
cargo add leptos-use-window-focus
```

--------------------------------

### Usage example for use_element_bounding

Source: https://leptos-use.rs/elements/use_element_bounding.html

Shows how to use `use_element_bounding` in a Leptos component. It creates a `NodeRef` for a `Div` element and calls the function to get reactive bounding box values. The returned `update` closure is a sendwrapped function and can only be called from the same thread that called `use_element_bounding`.

```rust
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_element_bounding::{use_element_bounding, UseElementBoundingReturn};

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();
let UseElementBoundingReturn {
    x, y, top,right,bottom,left, width, height, ..
} = use_element_bounding(el);

view! { <div node_ref=el></div> }
}
```

--------------------------------

### Rust usage of use_service_worker_with_options

Source: https://leptos-use.rs/browser/use_service_worker.html

Example component using use_service_worker_with_options with default options, setting script_url to 'service-worker.js' and skip_waiting_message to 'skipWaiting'. The returned values include registration, installing, waiting, active, skip_waiting, and check_for_update. Note: the returned closures are sendwrapped and can only be called from the same thread that called use_service_worker. This function does not support SSR; call it inside a create_effect.

```rust
use leptos::prelude::*;
use leptos_use_service_worker::{use_service_worker_with_options, UseServiceWorkerOptions, UseServiceWorkerReturn};

#[component]
fn Demo() -> impl IntoView {
let UseServiceWorkerReturn {
        registration,
        installing,
        waiting,
        active,
        skip_waiting,
        check_for_update,
} = use_service_worker_with_options(UseServiceWorkerOptions::default()
    .script_url("service-worker.js")
    .skip_waiting_message("skipWaiting"),
);

view! { }
}
```

--------------------------------

### Install leptos-use-user-media with cargo add

Source: https://leptos-use.rs/browser/use_user_media.html

Command to add the `leptos-use-user-media` crate as a dependency to a Cargo project.

```shell
cargo add leptos-use-user-media
```

--------------------------------

### Install leptos-use-intersection-observer with cargo add

Source: https://leptos-use.rs/elements/use_intersection_observer.html

Adds the `leptos-use-intersection-observer` crate as a dependency. This is the required installation step before using the function.

```shell
cargo add leptos-use-intersection-observer
```

--------------------------------

### Installation command for leptos-use-is

Source: https://leptos-use.rs/utilities/is_err.html

Adds the leptos-use-is crate to the project using cargo add.

```shell
cargo add leptos-use-is
```

--------------------------------

### Install leptos-use-scroll with cargo add

Source: https://leptos-use.rs/sensors/use_scroll.html

Adds the leptos-use-scroll crate to a Leptos project. Run this in the project root to install the dependency.

```shell
cargo add leptos-use-scroll
```

--------------------------------

### use_preferred_dark usage example

Source: https://leptos-use.rs/browser/use_preferred_dark.html

Example of using the `use_preferred_dark` function in a Leptos component to reactively detect dark theme preference.

```rust
use leptos::prelude::*;
use leptos_use_preferences::use_preferred_dark;

#[component]
fn Demo() -> impl IntoView {

let is_dark_preferred = use_preferred_dark();

   view! { }
}
```

--------------------------------

### use_timeout_fn

Source: https://leptos-use.rs/animation/use_timeout_fn.html

Creates a timeout function wrapper with start, stop, and is_pending controls. The callback is invoked after the specified delay when start is called.

```APIDOC
## use_timeout_fn

### Description
Creates a timeout function wrapper with controls. The returned object includes `start`, `stop`, and `is_pending` functions/values. Calling `start` schedules the callback after the given delay. Calling `stop` cancels any pending timeout. `is_pending` indicates whether a timeout is currently scheduled.

### Signature
```rust
use_timeout_fn(
    callback: impl FnMut(I) + 'static,
    wait: f64
) -> UseTimeoutFnReturn<I>
```

### Parameters
- **callback** (closure) - Required - The function to execute after the timeout. It can take an argument of type `I`.
- **wait** (f64) - Required - The delay in milliseconds before the callback is executed.

### Return Value
Returns a `UseTimeoutFnReturn` struct with the following fields:
- **start** (closure) - Starts the timeout. Takes an argument of type `I` which is passed to the callback. If a previous timeout is pending, it is cancelled and a new one is scheduled.
- **stop** (closure) - Cancels any pending timeout.
- **is_pending** (bool) - Indicates whether a timeout is currently pending.

### Usage Example
```rust
use leptos::prelude::*;
use leptos_use_timeout_fn::{use_timeout_fn, UseTimeoutFnReturn};

#[component]
fn Demo() -> impl IntoView {
    let UseTimeoutFnReturn { start, stop, is_pending, .. } = use_timeout_fn(
        |i: i32| {
            // do sth
        },
        3000.0
    );

    start(3);

    view! { }
}
```

### Rescheduling
Calling `start` while a previous timer is still pending cancels that pending timer and schedules a fresh one. Only the most recent `start` call’s callback will fire.

### SendWrapped Return
The returned closures `start` and `stop` are sendwrapped functions. They can only be called from the same thread that called `use_timeout_fn`.

### Server-Side Rendering
On the server the callback will never be run. The returned functions are all no-ops and `is_pending` will always be `false`.

### Installation
```shell
cargo add leptos-use-timeout-fn
```
```

--------------------------------

### Usage example for use_web_notification_with_options

Source: https://leptos-use.rs/browser/use_web_notification.html

Shows how to set up a Leptos component using use_web_notification_with_options with options like direction, language, renotify, and tag, then display a notification with show(). The function is ignored on the server; calling show() on the server does nothing.

```rust
use leptos::prelude::*;
use leptos_use_web_notification::{use_web_notification_with_options, UseWebNotificationOptions, ShowOptions, UseWebNotificationReturn, NotificationDirection};

#[component]
fn Demo() -> impl IntoView {
let UseWebNotificationReturn {
    show,
    close,
    ..
} = use_web_notification_with_options(
    UseWebNotificationOptions::default()
        .direction(NotificationDirection::Auto)
        .language("en")
        .renotify(true)
        .tag("test"),
);

show(ShowOptions::default().title("Hello World from leptos-use"));

view! { }
}
```

--------------------------------

### Install leptos-use-cycle-list with cargo add

Source: https://leptos-use.rs/utilities/use_cycle_list.html

Installation command for the `leptos-use-cycle-list` crate using Cargo.

```shell
cargo add leptos-use-cycle-list
```

--------------------------------

### Installation command for leptos-use-element

Source: https://leptos-use.rs/elements/use_mutation_observer.html

Adds the `leptos-use-element` crate to the project using Cargo.

```shell
cargo add leptos-use-element
```

--------------------------------

### use_toggle usage example in Rust

Source: https://leptos-use.rs/utilities/use_toggle.html

Example of using use_toggle in a Leptos component. It returns a UseToggleReturn with toggle, value, and set_value. The initial value is set to true.

```rust
use leptos::*;
use leptos_use_toggle::{use_toggle, UseToggleReturn};

#[component]
fn Demo() -> impl IntoView {
let UseToggleReturn { toggle, value, set_value } = use_toggle(true);

view! { }
}
```

--------------------------------

### use_floor usage example in Rust

Source: https://leptos-use.rs/math/use_floor.html

Shows how to use use_floor with a signal. The result is a Signal<f64> that floors the input value. In the example, the result is 45.0 for an input of 45.95.

```rust
use leptos::prelude::*;
use leptos_use_math::use_floor;

#[component]
fn Demo() -> impl IntoView {
let (value, set_value) = signal(45.95);
let result: Signal<f64> = use_floor(value); // 45

assert_eq!(result.get(), 45.0);
view! { }
}
```

--------------------------------

### use_web_notification_with_options

Source: https://leptos-use.rs/browser/use_web_notification.html

Initializes the notification API with the given options and returns a handle with `show` and `close` methods. This function is ignored on the server; calling `show` on the server does nothing.

```APIDOC
## use_web_notification_with_options

### Description
Initializes the notification API with the given options and returns a handle with `show` and `close` methods. This function is ignored on the server; calling `show` on the server does nothing.

### Function Signature
```rust
pub fn use_web_notification_with_options(options: UseWebNotificationOptions) -> UseWebNotificationReturn
```

### Parameters
- **options** (`UseWebNotificationOptions`) - Required - Configuration options for the notification.

### Returns
- **UseWebNotificationReturn** - A handle containing `show` and `close` methods.

### Usage Example
```rust
use leptos::prelude::*;
use leptos_use_web_notification::{use_web_notification_with_options, UseWebNotificationOptions, ShowOptions, UseWebNotificationReturn, NotificationDirection};

#[component]
fn Demo() -> impl IntoView {
    let UseWebNotificationReturn {
        show,
        close,
        ..
    } = use_web_notification_with_options(
        UseWebNotificationOptions::default()
            .direction(NotificationDirection::Auto)
            .language("en")
            .renotify(true)
            .tag("test"),
    );

    show(ShowOptions::default().title("Hello World from leptos-use"));

    view! { }
}
```

### Server-Side Rendering
This function is basically ignored on the server. You can safely call `show` but it will do nothing.
```

--------------------------------

### use_window_size usage example

Source: https://leptos-use.rs/elements/use_window_size.html

Shows how to use the `use_window_size` hook in a Leptos component. It returns a `UseWindowSizeReturn` struct with `width` and `height` fields. The example is minimal and does not display the values.

```rust
use leptos::*;
use leptos_use_window_size::{use_window_size, UseWindowSizeReturn};

#[component]
fn Demo() -> impl IntoView {
let UseWindowSizeReturn { width, height } = use_window_size();

view! { }
}
```

--------------------------------

### Usage example for use_prefers_reduced_motion

Source: https://leptos-use.rs/browser/use_prefers_reduced_motion.html

Shows how to use `use_prefers_reduced_motion` in a Leptos component to reactively display whether the user prefers reduced motion.

```rust
use leptos::prelude::*;
use leptos_use_preferences::use_prefers_reduced_motion;

#[component]
fn Demo() -> impl IntoView {
let is_reduced_motion_preferred = use_prefers_reduced_motion();

view! {
    <div>
        <p>Prefers reduced motions: {move || if is_reduced_motion_preferred.get() { "Yes" } else { "No" }}</p>
        <p>
            Update reduce motion preference
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">
                documentation.
            </a>
        </p>
    </div>
}
}
```
Tokens:
Raw