use_event_listener

Usage

use leptos::prelude::*;
use leptos::ev::visibilitychange;
use leptos::logging::log;
use leptos_use_document::use_document;
use leptos_use_event_listener::use_event_listener;

#[component]
fn Demo() -> impl IntoView {
use_event_listener(use_document(), visibilitychange, |evt| {
    log!("{:?}", evt);
});
   view! { }
}

You can also pass a NodeRef as the event target, use_event_listener will unregister the previous event and register the new one when you change the target.

use leptos::prelude::*;
use leptos::ev::click;
use leptos::logging::log;
use leptos_use_event_listener::use_event_listener;

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

use_event_listener(element, click, |evt| {
    log!("click from element {:?}", event_target::<web_sys::HtmlDivElement>(&evt));
});

let (cond, set_cond) = signal(true);

view! {
    <Show
        when=move || cond.get()
        fallback=move || view! { <div node_ref=element>"Condition false"</div> }
    >
        <div node_ref=element>"Condition true"</div>
    </Show>
}
}

You can also call the returned to unregister the listener.

use leptos::prelude::*;
use leptos::ev::keydown;
use leptos::logging::log;
use web_sys::KeyboardEvent;
use leptos_use_event_listener::use_event_listener;

#[component]
fn Demo() -> impl IntoView {
let cleanup = use_event_listener(document().body(), keydown, |evt: KeyboardEvent| {
    log!("{}", &evt.key());
});

cleanup();

   view! { }
}

SendWrapped Return

The returned closure is a sendwrapped function. It can only be called from the same thread that called use_event_listener.

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

On the server this amounts to a noop.

Installation

cargo add leptos-use-event-listener

Options

`UseEventListenerOptions`

Options for use_event_listener_with_options.

Every option is set with a builder method of the same name, e.g. UseEventListenerOptions::default().capture(...). See also the API docs.

A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. If not specified, defaults to false.

`once`

Type: bool

A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. If not specified, defaults to false.

`passive`

Type: Option<bool>

A boolean value that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. If not specified, defaults to false – except that in browsers other than Safari, defaults to true for the wheel, mousewheel, touchstart and touchmove events. See Improving scrolling performance with passive listeners to learn more.

Source

Source • Demo • Docs

Keyboard shortcuts