adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-02-02 10:54:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #10 from sectore/fix/use_scroll

Browse source 
Add callback example for `use_scroll`
This commit is contained in:
Marc-Stefan Cassola 2023-07-13 09:50:08 +01:00 • committed by GitHub
commit f7040bff92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
examples/use_scroll/src/main.rs
View file

@ -3,6 +3,8 @@ use leptos::*;
use leptos_use::docs::{demo_or_body, BooleanDisplay}; use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseScrollReturn}; use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseScrollReturn};
use web_sys::Event;
#[component] #[component]
fn Demo(cx: Scope) -> impl IntoView { fn Demo(cx: Scope) -> impl IntoView {
let el = create_node_ref::<Div>(cx); let el = create_node_ref::<Div>(cx);
@ -15,6 +17,14 @@ fn Demo(cx: Scope) -> impl IntoView {
} }
}); });
let on_stop = |_: Event| {
log!("scrolling stopped");
};
let on_scroll = |_: Event| {
log!("scrolling");
};
let UseScrollReturn { let UseScrollReturn {
x, x,
y, y,
@ -24,7 +34,14 @@ fn Demo(cx: Scope) -> impl IntoView {
arrived_state, arrived_state,
directions, directions,
.. ..
} = use_scroll_with_options(cx, el, UseScrollOptions::default().behavior(behavior)); } = use_scroll_with_options(
cx,
el,
UseScrollOptions::default()
.behavior(behavior)
.on_stop(on_stop.clone())
.on_scroll(on_scroll.clone()),
);
view! { cx, view! { cx,
<div class="flex"> <div class="flex">