Leptos Use

https://docs.rs/leptos-use/latest/
Admin
Leptos Use is a collection of essential Leptos utilities inspired by SolidJS USE and VueUse,...
Tokens:444,760
Snippets:4,686
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Storage Binding Examples

Source: https://docs.rs/leptos-use/latest/leptos_use/storage/fn.use_storage.html

Examples showing how to bind different data types to local or session storage using various codecs.

```rust
// Binds a struct:
let (state, set_state, _) = use_local_storage::<MyState, JsonSerdeCodec>("my-state");

// Binds a bool, stored as a string:
let (flag, set_flag, remove_flag) = use_session_storage::<bool, FromToStringCodec>("my-flag");

// Binds a number, stored as a string:
let (count, set_count, _) = use_session_storage::<i32, FromToStringCodec>("my-count");
// Binds a number, stored in JSON:
let (count, set_count, _) = use_session_storage::<i32, JsonSerdeCodec>("my-count-kept-in-js");

// Bind string with SessionStorage stored in ProtoBuf format:
let (id, set_id, _) = use_storage::<String, Base64<ProstCodec>>(
    StorageType::Session,
    "my-id",
);

// Data stored in JSON must implement Serialize, Deserialize.
// And you have to add the feature "serde" to your project's Cargo.toml
#[derive(Serialize, Deserialize, Clone, PartialEq)]
pub struct MyState {
    pub hello: String,
    pub greeting: String,
}

// Default can be used to implement initial or deleted values.
// You can also use a signal via UseStorageOptions::default_value`
impl Default for MyState {
    fn default() -> Self {
        Self {
            hello: "hi".to_string(),
            greeting: "Hello".to_string()
        }
    }
}
```

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

### Rc::clone_from_ref Examples

Source: https://docs.rs/leptos-use/latest/leptos_use/type.AssignFn.html?search=std%3A%3Avec

Examples for constructing an Rc from a reference using nightly-only experimental APIs.

```rust
#![feature(clone_from_ref)]
use std::rc::Rc;

let hello: Rc<str> = Rc::clone_from_ref("hello");
```

```rust
#![feature(clone_from_ref)]
#![feature(allocator_api)]
use std::rc::Rc;

let hello: Rc<str> = Rc::try_clone_from_ref("hello")?;
```

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

### Usage Example

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_mutation_observer.html

Demonstrates how to use the observer with a NodeRef and specific options.

```rust
let el = NodeRef::<Pre>::new();
let (text, set_text) = signal("".to_string());

use_mutation_observer_with_options(
    el,
    move |mutations, _| {
        if let Some(mutation) = mutations.first() {
            set_text.update(|text| *text = format!("{text}\n{:?}", mutation.attribute_name()));
        }
    },
    UseMutationObserverOptions::default().attributes(true),
);

view! {
    <pre node_ref=el>{ text }</pre>
}
```

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

### Rc::from_raw Examples

Source: https://docs.rs/leptos-use/latest/leptos_use/type.AssignFn.html?search=std%3A%3Avec

Examples for converting raw pointers back into Rc instances.

```rust
use std::rc::Rc;

let x = Rc::new("hello".to_owned());
let x_ptr = Rc::into_raw(x);

unsafe {
    // Convert back to an `Rc` to prevent leak.
    let x = Rc::from_raw(x_ptr);
    assert_eq!(&*x, "hello");

    // Further calls to `Rc::from_raw(x_ptr)` would be memory-unsafe.
}

// The memory was freed when `x` went out of scope above, so `x_ptr` is now dangling!
```

```rust
use std::rc::Rc;

let x: Rc<[u32]> = Rc::new([1, 2, 3]);
let x_ptr: *const [u32] = Rc::into_raw(x);

unsafe {
    let x: Rc<[u32; 3]> = Rc::from_raw(x_ptr.cast::<[u32; 3]>());
    assert_eq!(&*x, &[1, 2, 3]);
}
```

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

### Simple Usage Example

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_textarea_autosize.html

Basic implementation of an autosizing textarea using a NodeRef.

```rust
let textarea = NodeRef::new();

let UseTextareaAutosizeReturn {
    content,
    set_content,
    trigger_resize
} = use_textarea_autosize(textarea);

view! {
    <textarea
        prop:value=content
        on:input=move |evt| set_content.set(event_target_value(&evt))
        node_ref=textarea
        class="resize-none"
        placeholder="What's on your mind?"
    />
}
```

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

### NaiveDate and_time Example

Source: https://docs.rs/leptos-use/latest/leptos_use/enum.CalendarDate.html?search=u32+-%3E+bool

Demonstrates creating a NaiveDateTime from a NaiveDate and NaiveTime.

```rust
use chrono::{NaiveDate, NaiveDateTime, NaiveTime};

let d = NaiveDate::from_ymd_opt(2015, 6, 3).unwrap();
let t = NaiveTime::from_hms_milli_opt(12, 34, 56, 789).unwrap();

let dt: NaiveDateTime = d.and_time(t);
assert_eq!(dt.date(), d);
assert_eq!(dt.time(), t);
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_preferred_dark.html

Example of how to call the function to get the current dark mode preference.

```rust
let is_dark_preferred = use_preferred_dark();
```

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

### NaiveDate and_hms_micro_opt Example

Source: https://docs.rs/leptos-use/latest/leptos_use/enum.CalendarDate.html?search=u32+-%3E+bool

Demonstrates creating a NaiveDateTime with microsecond precision.

```rust
use chrono::{Datelike, NaiveDate, NaiveDateTime, Timelike, Weekday};

let d = NaiveDate::from_ymd_opt(2015, 6, 3).unwrap();

let dt: NaiveDateTime = d.and_hms_micro_opt(12, 34, 56, 789_012).unwrap();
assert_eq!(dt.year(), 2015);
assert_eq!(dt.weekday(), Weekday::Wed);
assert_eq!(dt.second(), 56);
assert_eq!(dt.nanosecond(), 789_012_000);
```

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

### Configuring Heartbeats

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_websocket.html?search=u32+-%3E+bool

Example of configuring heartbeats using use_websocket_with_options.

```rust
#[derive(Default)]
struct Heartbeat;

// Simple example for usage with `FromToStringCodec`
impl std::fmt::Display for Heartbeat {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        write!(f, "<Heartbeat>")
    }
}

let UseWebSocketReturn {
    send,
    message,
    ..
} = use_websocket_with_options::<String, String, FromToStringCodec, _, _>(
    "wss://echo.websocket.events/",
    UseWebSocketOptions::default()
        // Enable heartbeats every 10 seconds. In this case we use the same codec as for the
        // other messages. But this is not necessary.
        .heartbeat::<Heartbeat, FromToStringCodec>(10_000),
);
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_resize_observer.html?search=

Example of tracking an element's dimensions and updating a signal.

```rust
let el = NodeRef::<Div>::new();
let (text, set_text) = signal("".to_string());

use_resize_observer(
    el,
    move |entries, observer| {
        let rect = entries[0].content_rect();
        set_text.set(format!("width: {}\nheight: {}", rect.width(), rect.height()));
    },
);

view! {
    <div node_ref=el>{ move || text.get() }</div>
}
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_interval_fn.html

Example of initializing use_interval_fn with a callback and a 1000ms interval.

```rust
let Pausable { pause, resume, is_active } = use_interval_fn(
    || {
        // do something
    },
    1000,
);
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_intersection_observer.html?search=

Example showing how to track the visibility of a div element using a NodeRef.

```rust
let el = NodeRef::<Div>::new();
let (is_visible, set_visible) = signal(false);

use_intersection_observer(
    el,
    move |entries, _| {
        set_visible.set(entries[0].is_intersecting());
    },
);

view! {
    <div node_ref=el>
        <h1>"Hello World"</h1>
    </div>
}
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_broadcast_channel.html

Example of initializing a broadcast channel and using the returned post and close functions.

```rust
let UseBroadcastChannelReturn {
    is_supported,
    message,
    post,
    error,
    close,
    ..
} = use_broadcast_channel::<bool, FromToStringCodec>("some-channel-name");

post(&true);

close();
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_cookie.html?search=std%3A%3Avec

Example of creating a reactive counter cookie that updates automatically.

```rust
let (counter, set_counter) = use_cookie::<u32, FromToStringCodec>("counter");

let reset = move || set_counter.set(Some(random()));

if counter.get().is_none() {
    reset();
}

let increase = move || {
    set_counter.set(counter.get().map(|c| c + 1));
};

view! {
    <p>Counter: {move || counter.get().map(|c| c.to_string()).unwrap_or("—".to_string())}</p>
    <button on:click=move |_| reset()>Reset</button>
    <button on:click=move |_| increase()>+</button>
}
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_web_lock.html

Example of acquiring a lock and executing a process within a local task.

```rust
async fn my_process(_lock: web_sys::Lock) -> i32 {
    // do sth
    42
}

leptos::task::spawn_local(async {
    let res = use_web_lock("my_lock", my_process).await;
    assert!(matches!(res, Ok(42)));
});
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_element_hover.html

Example showing how to track the hover state of a button element using a NodeRef.

```rust
let el = NodeRef::<Button>::new();
let is_hovered = use_element_hover(el);

view! {
    <button node_ref=el>{ move || format!("{:?}", is_hovered.get()) }</button>
}
```

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

### Basic Usage of use_timeout_fn

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_timeout_fn.html?search=

Demonstrates how to initialize and start a timeout function.

```rust
let UseTimeoutFnReturn { start, stop, is_pending, .. } = use_timeout_fn(
    |i: i32| {
        // do sth
    },
    3000.0
);

start(3);
```

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

### Convert Option References

Source: https://docs.rs/leptos-use/latest/leptos_use/core/struct.NoneGuard.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Examples for converting Option<T> to Option<&T> or Option<&mut T>.

```rust
let text: Option<String> = Some("Hello, world!".to_string());
// First, cast `Option<String>` to `Option<&String>` with `as_ref`,
// then consume *that* with `map`, leaving `text` on the stack.
let text_length: Option<usize> = text.as_ref().map(|s| s.len());
println!("still can print text: {text:?}");
```

```rust
let mut x = Some(2);
match x.as_mut() {
    Some(v) => *v = 42,
    None => {},
}
assert_eq!(x, Some(42));
```

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

### use_document usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_document.html

Demonstrates how to use the function to safely access the document body.

```rust
let document = use_document();

// Returns `None` on the server but will not panic.
let body = document.body();
```

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

### use_floor usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_floor.html

Demonstrates how to pass a signal to use_floor to obtain a reactive floored value.

```rust
let (value, set_value) = signal(45.95);
let result: Signal<f64> = use_floor(value); // 45
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_mouse_in_element.html

Example of tracking mouse position within a div element using a NodeRef.

```rust
let target = NodeRef::<Div>::new();
let UseMouseInElementReturn { x, y, is_outside, .. } = use_mouse_in_element(target);

view! {
    <div node_ref=target>
        <h1>Hello world</h1>
    </div>
}
```

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

### Throttling and Debouncing with watch_with_options

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.watch_with_options.html

Examples showing how to apply throttle and debounce filters to the watch callback.

```rust
watch_with_options(
    move || num.get(),
    move |num, _, _| {
        log!("Number {}", num);
    },
    WatchOptions::default().throttle(100.0), // there's also `throttle_with_options`
);
```

```rust
watch_with_options(
    move || num.get(),
    move |num, _, _| {
        log!("number {}", num);
    },
    WatchOptions::default().debounce(100.0), // there's also `debounce_with_options`
);
```

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

### Usage of watch_debounced_with_options

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.watch_debounced.html?search=

Example demonstrating how to use watch_debounced_with_options to configure additional parameters like max_wait.

```rust
watch_debounced_with_options(
    move || source.get(),
    move |_, _, _| {
        log!("changed!");
    },
    500.0,
    WatchDebouncedOptions::default().max_wait(Some(1000.0)),
);
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_drop_zone.html

Example showing how to initialize a drop zone using a NodeRef and handle drop events.

```rust
let drop_zone_el = NodeRef::<Div>::new();

let on_drop = |event| {
    // called when files are dropped on zone
};

let UseDropZoneReturn {
    is_over_drop_zone,
    ..
} = use_drop_zone_with_options(
    drop_zone_el,
    UseDropZoneOptions::default().on_drop(on_drop)
);

view! {
    <div node_ref=drop_zone_el>
        "Drop files here"
    </div>
}
```

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

### use_ceil usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_ceil.html

Demonstrates how to pass a signal to use_ceil to get a reactive ceiling value.

```rust
let (value, set_value) = signal(44.15);
let result: Signal<f64> = use_ceil(value); // 45
```

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

### use_display_media_with_options(options)

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_display_media.rs.html?search=

Initializes the display media capture with custom configuration options.

```APIDOC
## fn use_display_media_with_options(options: UseDisplayMediaOptions)

### Description
Allows configuring the display media capture process, such as enabling audio capture.

### Parameters
- **options** (UseDisplayMediaOptions) - Configuration object containing:
  - **enabled** (MaybeRwSignal<bool>) - Whether the stream should be active.
  - **audio** (bool) - Whether to request audio tracks.
```

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

### use_round usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_round.html

Basic implementation showing how to pass a signal to use_round to get a rounded result.

```rust
let (value, set_value) = signal(45.95);
let result: Signal<f64> = use_round(value); // 46
```

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

### Rc::into_raw Example

Source: https://docs.rs/leptos-use/latest/leptos_use/type.AssignFn.html?search=std%3A%3Avec

Example for consuming an Rc and returning the wrapped raw pointer.

```rust
use std::rc::Rc;

let x = Rc::new("hello".to_owned());
let x_ptr = Rc::into_raw(x);
assert_eq!(unsafe { &*x_ptr }, "hello");
```

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

### Immediate Execution with watch_with_options

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.watch_with_options.html

Example demonstrating the immediate execution option, which triggers the callback upon initialization.

```rust
let (num, set_num) = signal(0);

watch_with_options(
    move || num.get(),
    move |num, _, _| {
        log!("Number {}", num);
    },
    WatchOptions::default().immediate(true),
); // > "Number 0"

set_num.set(1); // > "Number 1"
```

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

### Hydration Fix Example

Source: https://docs.rs/leptos-use/latest/leptos_use/storage/fn.use_storage.html

Example using the delay_during_hydration option to prevent hydration warnings.

```rust
let (flag, set_flag, _) = use_local_storage_with_options::<bool, FromToStringCodec>(
    "my-flag",
    UseStorageOptions::default().delay_during_hydration(true),
);

view! {
    <Show when=move || flag.get()>
        <div>Some conditional content</div>
    </Show>
}
```

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

### use_user_media_with_options(options)

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_user_media.rs.html

Initializes a reactive media stream with custom configuration options.

```APIDOC
## fn use_user_media_with_options(options: UseUserMediaOptions)

### Description
Similar to `use_user_media`, but allows passing a `UseUserMediaOptions` struct to configure specific media constraints (audio/video) and initial enabled state.

### Parameters
- **options** (UseUserMediaOptions) - Configuration object for the media stream, including `enabled`, `video`, and `audio` settings.
```

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

### use_display_media(options: UseDisplayMediaOptions)

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_display_media.rs.html?search=

Initializes the display media capture process. Returns a struct containing the current stream, control functions, and reactive state.

```APIDOC
## use_display_media

### Description
Requests access to the user's display media (screen sharing) and returns a reactive interface to manage the stream.

### Parameters
- **options** (UseDisplayMediaOptions) - Optional - Configuration for the display media stream.

### Options
- **enabled** (MaybeRwSignal<bool>) - Whether the stream should be active.
- **audio** (bool) - Whether to request an audio track with the display stream.

### Return Value
- **stream** (OptionLocalSignal<Result<web_sys::MediaStream, JsValue>>) - The current MediaStream or error state.
- **start** (Fn) - Function to trigger the browser's permission prompt and start streaming.
- **stop** (Fn) - Function to stop the current stream.
- **enabled** (Signal<bool>) - Reactive boolean indicating if the stream is active.
- **set_enabled** (WriteSignal<bool>) - Setter to toggle the stream state.
```

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

### Rc::increment_strong_count Example

Source: https://docs.rs/leptos-use/latest/leptos_use/type.AssignFn.html?search=std%3A%3Avec

Example for manually incrementing the strong reference count of an Rc via a raw pointer.

```rust
use std::rc::Rc;

let five = Rc::new(5);

unsafe {
    let ptr = Rc::into_raw(five);
    Rc::increment_strong_count(ptr);

    let five = Rc::from_raw(ptr);
    assert_eq!(2, Rc::strong_count(&five));
}
```

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

### Hydration Issue Example

Source: https://docs.rs/leptos-use/latest/leptos_use/storage/fn.use_storage.html

Example of code that may cause hydration warnings when using storage for conditional rendering.

```rust
let (flag, set_flag, _) = use_session_storage::<bool, FromToStringCodec>("my-flag");

view! {
    <Show when=move || flag.get()>
        <div>Some conditional content</div>
    </Show>
}
```

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

### Using Web Notifications

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_web_notification.rs.html?search=u32+-%3E+bool

Demonstrates how to initialize the notification hook with custom options and trigger a notification display.

```rust
# use leptos::prelude::*;
# use leptos_use::{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! { }
# }
```

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

### Iterate over Option values

Source: https://docs.rs/leptos-use/latest/leptos_use/core/struct.NoneGuard.html?search=

Use iter() to get an iterator over the contained value, or iter_mut() to get a mutable iterator.

```rust
let x = Some(4);
assert_eq!(x.iter().next(), Some(&4));

let x: Option<u32> = None;
assert_eq!(x.iter().next(), None);
```

```rust
let mut x = Some(4);
match x.iter_mut().next() {
    Some(v) => *v = 42,
    None => {},
}
assert_eq!(x, Some(42));

let mut x: Option<u32> = None;
assert_eq!(x.iter_mut().next(), None);
```

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

### use_user_media_with_options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_user_media.rs.html?search=std%3A%3Avec

Initializes a reactive media stream with custom configuration options.

```APIDOC
## fn use_user_media_with_options(options: UseUserMediaOptions)

### Description
Allows configuring the media stream request with specific options such as enabled state, video, and audio constraints.

### Parameters
- **options** (UseUserMediaOptions) - Configuration object for the media stream, including `enabled`, `video`, and `audio` settings.
```

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

### use_timeout_fn

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_timeout_fn.html?search=std%3A%3Avec

A function that schedules a callback to run after a specified delay. Calling start again while a timer is pending will cancel the previous timer and start a new one.

```APIDOC
## Function: use_timeout_fn

### Description
Wraps the browser's `setTimeout` functionality. It returns controls to start, stop, and monitor the pending state of the timer.

### Signature
`pub fn use_timeout_fn<CbFn, Arg, D>(callback: CbFn, delay: D) -> UseTimeoutFnReturn<...>`

### Parameters
- **callback** (CbFn) - The function to execute after the delay. Must be `Clone` and `'static`.
- **delay** (D) - The delay duration in milliseconds. Must implement `Into<Signal<f64>>`.

### Return Value
Returns a `UseTimeoutFnReturn` struct containing:
- **start**: A function to trigger the timer with an argument.
- **stop**: A function to cancel the pending timer.
- **is_pending**: A signal indicating if the timer is currently active.

### Usage Example
```rust
let UseTimeoutFnReturn { start, stop, is_pending, .. } = use_timeout_fn(
    |i: i32| {
        // Callback logic
    },
    3000.0
);

start(3); // Schedules the callback to run after 3000ms
```
```

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

### Slice Conversion

Source: https://docs.rs/leptos-use/latest/leptos_use/core/struct.NoneGuard.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Examples for converting Options to slices.

```rust
assert_eq!(
    [Some(1234).as_slice(), None.as_slice()],
    [&[1234][..], &[][..]],
);
```

```rust
for i in [Some(1234_u16), None] {
    assert_eq!(i.as_ref(), i.as_slice().first());
}
```

```rust
assert_eq!(
    [Some(1234).as_mut_slice(), None.as_mut_slice()],
    [&mut [1234][..], &mut [][..]],
);
```

```rust
let mut x = Some(1234);
x.as_mut_slice()[0] += 1;
assert_eq!(x, Some(1235));
```

```rust
assert_eq!(Some(123).as_mut_slice().first_mut(), Some(&mut 123))
```

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

### Usage of use_drop_zone_with_options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_drop_zone.rs.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Demonstrates how to use use_drop_zone_with_options to create a drop zone and handle file drops.

```rust
# use leptos::prelude::*;
# use leptos::html::Div;
# use leptos_use::{use_drop_zone_with_options, UseDropZoneOptions, UseDropZoneReturn};
#
# #[component]
# fn Demo() -> impl IntoView {
let drop_zone_el = NodeRef::<Div>::new();

let on_drop = |event| {
    // called when files are dropped on zone
};

let UseDropZoneReturn {
    is_over_drop_zone,
    ..
} = use_drop_zone_with_options(
    drop_zone_el,
    UseDropZoneOptions::default().on_drop(on_drop)
);

view! {
    <div node_ref=drop_zone_el>
        "Drop files here"
    </div>
}
# }
```

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

### ServiceWorker Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_service_worker.html

Example of initializing the ServiceWorker with custom options.

```rust
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"),
);
```

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

### use_display_media_with_options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_display_media.rs.html?search=std%3A%3Avec

Initializes the display media capture hook with custom configuration options.

```APIDOC
## use_display_media_with_options(options: UseDisplayMediaOptions)

### Description
Allows configuring the display media capture process via `UseDisplayMediaOptions`.

### Parameters
- **options** (UseDisplayMediaOptions) - Configuration object containing:
  - **enabled**: `MaybeRwSignal<bool>` - Initial enabled state.
  - **audio**: `bool` - Whether to request audio capture.
```

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

### Implement UseMouseEventExtractor for Infallible

Source: https://docs.rs/leptos-use/latest/leptos_use/trait.UseMouseEventExtractor.html?search=

Example implementation of the trait for the Infallible type.

```rust
impl UseMouseEventExtractor for Infallible
```

```rust
fn extract_mouse_coords(&self, _: &MouseEvent) -> Option<(f64, f64)>
```

```rust
fn extract_touch_coords(&self, _: &Touch) -> Option<(f64, f64)>
```

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

### AudioTrackConstraints Initialization and Device Configuration

Source: https://docs.rs/leptos-use/latest/leptos_use/struct.AudioTrackConstraints.html?search=

Methods for creating a new instance and setting the device ID.

```rust
pub fn new() -> Self
```

```rust
pub fn device_id<M>(self, value: impl IntoDeviceIds<M>) -> Self
```

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

### use_display_media()

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_display_media.rs.html?search=

Initializes the display media capture with default options.

```APIDOC
## fn use_display_media()

### Description
Returns a `UseDisplayMediaReturn` struct containing the reactive stream, and functions to start and stop the media capture.

### Returns
- **UseDisplayMediaReturn** - A struct containing:
  - **stream**: `Signal<Option<Result<MediaStream, JsValue>>>` - The current media stream.
  - **start**: `Fn() + Clone + Send + Sync` - Function to initiate the display media request.
  - **stop**: `Fn() + Clone + Send + Sync` - Function to stop the current media stream.
  - **enabled**: `Signal<bool>` - Reactive state indicating if the stream is active.
  - **set_enabled**: `WriteSignal<bool>` - Setter for the enabled state.
```

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

### WebSocket Connection Initialization

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_websocket.rs.html

Handles the creation of a new WebSocket instance and sets up the initial connection state.

```rust
connect_ref.set_value({
    let unmounted = Arc::clone(&unmounted);
    let on_error = Arc::clone(&on_error);

    Some(Arc::new(move || {
        if let Some(reconnect_timer) = reconnect_timer_ref.get_value() {
            reconnect_timer.clear();
            reconnect_timer_ref.set_value(None);
        }

        if let Some(web_socket) = ws.get_value() {
            let _ = web_socket.close();
        }

        connection_id_ref.update_value(|id| *id += 1);
        let connection_id = connection_id_ref.get_value();

        let web_socket = {
            protocols.with_untracked(|protocols| {
                protocols.as_ref().map_or_else(
                    || WebSocket::new(&url).unwrap_throw(),
                    |protocols| {
                        let array = protocols
                            .iter()
                            .map(|p| JsValue::from(p.clone()))
                            .collect::<Array>();
                        WebSocket::new_with_str_sequence(&url, &JsValue::from(&array))
                            .unwrap_throw()
                    },
                )
            })
        };
        web_socket.set_binary_type(BinaryType::Arraybuffer);
        set_ready_state.set(ConnectionReadyState::Connecting);

        // onopen handler
        {
            let unmounted = Arc::clone(&unmounted);
            let on_open = Arc::clone(&on_open);

            let onopen_closure = Closure::wrap(Box::new({
                let start_heartbeat = start_heartbeat.clone();

                move |e: Event| {
                    if unmounted.load(std::sync::atomic::Ordering::Relaxed)
                        || connection_id_ref.get_value() != connection_id
```

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

### Deref Conversion

Source: https://docs.rs/leptos-use/latest/leptos_use/core/struct.NoneGuard.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Examples for converting Options using Deref and DerefMut.

```rust
let x: Option<String> = Some("hey".to_owned());
assert_eq!(x.as_deref(), Some("hey"));

let x: Option<String> = None;
assert_eq!(x.as_deref(), None);
```

```rust
let mut x: Option<String> = Some("hey".to_owned());
assert_eq!(x.as_deref_mut().map(|x| {
    x.make_ascii_uppercase();
    x
}), Some("HEY".to_owned().as_mut_str()));
```

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

### Basic usage of use_clipboard

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_clipboard.html

Demonstrates how to access clipboard state and trigger a copy action within a Leptos view.

```rust
let UseClipboardReturn { is_supported, text, copied, copy } = use_clipboard();

view! {
    <Show
        when=move || is_supported.get()
        fallback=move || view! { <p>Your browser does not support Clipboard API</p> }
    >
        <button on:click={
            let copy = copy.clone();
            move |_| copy("Hello!")
        }>
            <Show when=move || copied.get() fallback=move || "Copy">
                "Copied!"
            </Show>
        </button>
    </Show>
}
```

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

### Struct Definition for Sync

Source: https://docs.rs/leptos-use/latest/src/leptos_use/sync_signal.rs.html?search=u32+-%3E+bool

Example of a struct that might be used in signal synchronization.

```rust
# use leptos::prelude::*;
# use leptos_use::{sync_signal_with_options, SyncSignalOptions};
# use std::str::FromStr;
#
#[derive(Clone)]
pub struct Foo {
    bar: i32,
}

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

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

### use_user_media()

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_user_media.rs.html

Initializes a reactive media stream from user devices using default options.

```APIDOC
## fn use_user_media()

### Description
Returns a `UseUserMediaReturn` struct containing the reactive `stream` signal, and `start`/`stop` functions to control the media capture process.

### Returns
- **UseUserMediaReturn** - A struct containing:
  - `stream`: A signal containing the `Result<web_sys::MediaStream, JsValue>`.
  - `start`: A function to initiate the media stream request.
  - `stop`: A function to stop all tracks and clear the stream.
```

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

### Usage with Options

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.watch_throttled.html?search=

Example of using watch_throttled_with_options to configure leading and trailing behavior.

```rust
watch_throttled_with_options(
    move || source.get(),
    move |_, _, _| {
        log!("changed!");
    },
    500.0,
    WatchThrottledOptions::default().leading(true).trailing(false),
);
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.watch_throttled.html?search=

Example of using watch_throttled to log changes with a 500ms throttle.

```rust
watch_throttled(
    move || source.get(),
    move |_, _, _| {
        log!("changed!");
    },
    500.0,
);
```

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

### Use Service Worker with Options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_service_worker.rs.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Demonstrates how to initialize the service worker with custom script URL and skip waiting message options.

```rust
# use leptos::prelude::*;
# use leptos_use::{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! { }
# }
```

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

### use_display_media()

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_display_media.html

Initializes a reactive display media stream. Returns a struct containing the current stream state and control functions to start or stop the capture.

```APIDOC
## Function: use_display_media

### Description
Reactive wrapper for `mediaDevices.getDisplayMedia`. It returns a `UseDisplayMediaReturn` object containing the stream state and control functions.

### Signature
`pub fn use_display_media() -> UseDisplayMediaReturn<impl Fn() + Clone + Send + Sync, impl Fn() + Clone + Send + Sync>`

### Returns
- **UseDisplayMediaReturn**: A struct containing:
  - **stream**: A reactive signal containing the current `MediaStream` or error.
  - **start**: A closure to initiate the display media capture.
  - **stop**: A closure to terminate the display media capture.

### Usage Example
```rust
let video_ref = NodeRef::<leptos::html::Video>::new();
let UseDisplayMediaReturn { stream, start, .. } = use_display_media();

start();

Effect::new(move |_| {
    if let Some(v) = video_ref.get() {
        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"),
        }
    }
});
```

### Notes
- **Thread Safety**: The returned `start` and `stop` closures are sendwrapped and must be called from the same thread that initialized `use_display_media`.
- **SSR**: On the server, calls to `start` are ignored and the stream will always be `None`.
```

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

### Usage of use_window

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_window.html

Example showing how to call use_window and access its methods safely across SSR environments.

```rust
let window = use_window();

// Returns `None` on the server but will not panic.
let navigator = window.navigator();
```

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

### Customizing date format with options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_intl_datetime_format.rs.html

Demonstrates how to use specific formatting options like weekday, year, month, and time zone settings.

```rust
# use leptos::prelude::*;
# use leptos_use::{
#     use_intl_datetime_format, UseIntlDateTimeFormatOptions, WeekdayFormat, EraFormat,
#     YearFormat, MonthFormat, DayFormat, TimeNumericFormat, TimeZoneNameFormat,
# };
# use chrono::{TimeZone, Utc};
#
# #[component]
# fn Demo() -> impl IntoView {
let date = Utc.with_ymd_and_hms(2012, 12, 20, 3, 0, 0).unwrap();

// request a weekday along with a long date
let date_time_format = use_intl_datetime_format(
    UseIntlDateTimeFormatOptions::default()
        .locale("en-US")
        .weekday(WeekdayFormat::Long)
        .year(YearFormat::Numeric)
        .month(MonthFormat::Long)
        .day(DayFormat::Numeric),
);
let formatted = date_time_format.format(date); // "Thursday, December 20, 2012"

// an application may want to use UTC and make that visible
let date_time_format = use_intl_datetime_format(
    UseIntlDateTimeFormatOptions::default()
        .locale("en-US")
        .hour(TimeNumericFormat::Numeric)
        .minute(TimeNumericFormat::TwoDigit)
        .second(TimeNumericFormat::TwoDigit)
        .time_zone("UTC")
        .time_zone_name(TimeZoneNameFormat::Short),
);
```

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

### Usage of is_none

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.is_none.html?search=

Example demonstrating how to use is_none with a signal containing an Option.

```rust
let (example, set_example) = signal(
    if js_sys::Math::random() < 0.5 { Some("Example") } else { None }
);

let is_empty = is_none::<_, &str>(example);
```

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

### NaiveDate and_hms_milli_opt Example

Source: https://docs.rs/leptos-use/latest/leptos_use/enum.CalendarDate.html?search=u32+-%3E+bool

Demonstrates creating a NaiveDateTime with millisecond precision, including leap second handling.

```rust
use chrono::NaiveDate;

let d = NaiveDate::from_ymd_opt(2015, 6, 3).unwrap();
assert!(d.and_hms_milli_opt(12, 34, 56, 789).is_some());
assert!(d.and_hms_milli_opt(12, 34, 59, 1_789).is_some()); // leap second
assert!(d.and_hms_milli_opt(12, 34, 59, 2_789).is_none());
assert!(d.and_hms_milli_opt(12, 34, 60, 789).is_none());
assert!(d.and_hms_milli_opt(12, 60, 56, 789).is_none());
assert!(d.and_hms_milli_opt(24, 34, 56, 789).is_none());
```

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

### Usage of is_err

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.is_err.html?search=

Example demonstrating how to use is_err with a signal containing a Result.

```rust
let (example, set_example) = signal(
    if js_sys::Math::random() < 0.5 { Ok("Example") } else { Err(()) }
);

let is_error = is_err(example);
```

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

### use_web_notification_with_options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_web_notification.rs.html

Initializes the notification service with custom options.

```APIDOC
## use_web_notification_with_options(options: UseWebNotificationOptions)

### Description
Initializes the notification service with specific configuration options such as language, direction, and event callbacks.

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

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

### Check Option State

Source: https://docs.rs/leptos-use/latest/leptos_use/core/struct.NoneGuard.html?search=Option%3CT%3E%2C+%28T+-%3E+U%29+-%3E+Option%3CU%3E

Examples for checking if an Option contains a value or is None.

```rust
let x: Option<u32> = Some(2);
assert_eq!(x.is_some(), true);

let x: Option<u32> = None;
assert_eq!(x.is_some(), false);
```

```rust
let x: Option<u32> = Some(2);
assert_eq!(x.is_none(), false);

let x: Option<u32> = None;
assert_eq!(x.is_none(), true);
```

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

### Customizing date format options

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_intl_datetime_format.rs.html?search=

Demonstrates how to customize the output format using various formatting options.

```rust
let date = Utc.with_ymd_and_hms(2012, 12, 20, 3, 0, 0).unwrap();

// request a weekday along with a long date
let date_time_format = use_intl_datetime_format(
    UseIntlDateTimeFormatOptions::default()
        .locale("en-US")
        .weekday(WeekdayFormat::Long)
        .year(YearFormat::Numeric)
        .month(MonthFormat::Long)
        .day(DayFormat::Numeric),
);
let formatted = date_time_format.format(date); // "Thursday, December 20, 2012"

// an application may want to use UTC and make that visible
let date_time_format = use_intl_datetime_format(
    UseIntlDateTimeFormatOptions::default()
        .locale("en-US")
        .hour(TimeNumericFormat::Numeric)
        .minute(TimeNumericFormat::TwoDigit)
        .second(TimeNumericFormat::TwoDigit)
        .time_zone("UTC")
        .time_zone_name(TimeZoneNameFormat::Short),
);
```

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

### use_favicon()

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_favicon.html

Returns a signal pair to get and set the current favicon URL.

```APIDOC
## use_favicon()

### Description
Provides a reactive interface to manage the document favicon. Returns a tuple containing a read-only Signal and a WriteSignal to update the icon.

### Signature
`pub fn use_favicon() -> (Signal<Option<String>>, WriteSignal<Option<String>>)`

### Usage
```rust
let (icon, set_icon) = use_favicon();
set_icon.set(Some("dark.png".to_string()));
```
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_prefers_reduced_motion.html?search=

Example of using the hook within a Leptos view to display the current reduced motion preference.

```rust
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>
}
```

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

### Set initial idle state

Source: https://docs.rs/leptos-use/latest/leptos_use/struct.UseIdleOptions.html?search=

Defines the starting value for the idle state.

```rust
pub fn initial_state(self, value: bool) -> Self
```

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

### Basic Usage

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_preferred_contrast.html?search=

Initialize the preferred contrast signal within a component.

```rust
let preferred_contrast = use_preferred_contrast();
```

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

### use_or usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_or.html

Basic usage of the use_or function with two boolean signals.

```rust
let (a, set_a) = signal(true);
let (b, set_b) = signal(false);

let a_or_b = use_or(a, b);
```

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

### use_not usage example

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_not.html?search=

Basic usage of the use_not function to invert a boolean signal.

```rust
let (a, set_a) = signal(true);

let not_a = use_not(a);
```

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

### Basic Clipboard Usage

Source: https://docs.rs/leptos-use/latest/src/leptos_use/use_clipboard.rs.html?search=

Demonstrates how to use the use_clipboard hook to copy text to the system clipboard and track the copy state.

```rust
# use leptos::prelude::*;
# use leptos_use::{use_clipboard, UseClipboardReturn};
#
# #[component]
# fn Demo() -> impl IntoView {
let UseClipboardReturn { is_supported, text, copied, copy } = use_clipboard();

view! {
    <Show
        when=move || is_supported.get()
        fallback=move || view! { <p>Your browser does not support Clipboard API</p> }
    >
        <button on:click={
            let copy = copy.clone();
            move |_| copy("Hello!")
        }>
            <Show when=move || copied.get() fallback=move || "Copy">
                "Copied!"
            </Show>
        </button>
    </Show>
}
```

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

### Usage of use_min

Source: https://docs.rs/leptos-use/latest/leptos_use/math/fn.use_min.html

Example showing how to use use_min with a signal containing a vector of floats.

```rust
let (values, set_values) = signal(vec![1.0, 2.0, 3.0, f32::NAN, 4.0, 5.0]);
let result = use_min::<Vec<f32>, _, _>(values); // Some(1.0)
```

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

### Usage with Options

Source: https://docs.rs/leptos-use/latest/leptos_use/fn.use_throttle_fn.html?search=

Example of using use_throttle_fn_with_options to configure leading and trailing execution behavior.

```rust
let throttled_fn = use_throttle_fn_with_options(
    || {
        // do something, it will be called at most 1 time per second
    },
    1000.0,
    ThrottleOptions::default()
        .leading(true)
        .trailing(true),
);
```

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

### UseDisplayMediaOptions

Source: https://docs.rs/leptos-use/latest/leptos_use/struct.UseDisplayMediaOptions.html

Configuration builder for display media capture.

```APIDOC
## Method: enabled

### Description
Sets whether the display media stream is enabled.

### Parameters
- **value** (MaybeRwSignal<bool>) - Required - If the stream is enabled. Defaults to false.

## Method: audio

### Description
Sets whether the returned MediaStream should contain an audio track.

### Parameters
- **value** (bool) - Required - Indicates if the stream will contain an audio track. Defaults to false.
```
Tokens:
Raw