diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b77da84..cccd68e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,11 +30,12 @@ jobs:
run: python3 docs/generate_count_badge.py --check
- name: Check formatting
run: cargo fmt --check
- - name: Clippy check
- uses: auguwu/clippy-action@1.1.2
- with:
- args: --all-features --tests
- token: ${{ secrets.GITHUB_TOKEN }}
+# TODO: this action doesn't seem to work
+# - name: Clippy check
+# uses: auguwu/clippy-action@1.1.2
+# with:
+# args: --all-features --tests
+# token: ${{ secrets.GITHUB_TOKEN }}
- name: Run tests
run: cargo test --all-features
diff --git a/.idea/leptos-use.iml b/.idea/leptos-use.iml
index 8241efb..1e82568 100644
--- a/.idea/leptos-use.iml
+++ b/.idea/leptos-use.iml
@@ -24,6 +24,7 @@
+
+ "Enabled"
+
+
+
+
+
+
+ "Element "
+
+
+
+ }
+}
+
+fn main() {
+ _ = console_log::init_with_level(log::Level::Debug);
+ console_error_panic_hook::set_once();
+
+ mount_to(demo_or_body(), |cx| {
+ view! { cx, ,
- #[prop(optional)] class: String,
+ #[prop(optional, into)] class: String,
+ #[prop(default = "true")] true_str: &'static str,
+ #[prop(default = "false")] false_str: &'static str,
) -> impl IntoView {
let true_class = "text-green-600 dark:text-green-500";
let false_class = "text-[--brand-color]";
- let true_str = "true";
- let false_str = "false";
let class = move || {
format!(
diff --git a/src/lib.rs b/src/lib.rs
index c32f70a..ddd9a7f 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -10,18 +10,25 @@ pub mod math;
pub mod storage;
pub mod utils;
-mod use_breakpoints;
-mod use_debounce_fn;
#[cfg(web_sys_unstable_apis)]
mod use_element_size;
+#[cfg(web_sys_unstable_apis)]
+mod use_resize_observer;
+
+#[cfg(web_sys_unstable_apis)]
+pub use use_element_size::*;
+#[cfg(web_sys_unstable_apis)]
+pub use use_resize_observer::*;
+
+mod use_breakpoints;
+mod use_debounce_fn;
mod use_event_listener;
mod use_favicon;
+mod use_intersection_observer;
mod use_media_query;
mod use_mouse;
mod use_preferred_contrast;
mod use_preferred_dark;
-#[cfg(web_sys_unstable_apis)]
-mod use_resize_observer;
mod use_scroll;
mod use_supported;
mod use_throttle_fn;
@@ -32,16 +39,13 @@ mod watch_throttled;
pub use use_breakpoints::*;
pub use use_debounce_fn::*;
-#[cfg(web_sys_unstable_apis)]
-pub use use_element_size::*;
pub use use_event_listener::*;
pub use use_favicon::*;
+pub use use_intersection_observer::*;
pub use use_media_query::*;
pub use use_mouse::*;
pub use use_preferred_contrast::*;
pub use use_preferred_dark::*;
-#[cfg(web_sys_unstable_apis)]
-pub use use_resize_observer::*;
pub use use_scroll::*;
pub use use_supported::*;
pub use use_throttle_fn::*;
diff --git a/src/use_intersection_observer.rs b/src/use_intersection_observer.rs
new file mode 100644
index 0000000..a0726a0
--- /dev/null
+++ b/src/use_intersection_observer.rs
@@ -0,0 +1,267 @@
+use crate::core::ElementMaybeSignal;
+use crate::{watch_with_options, WatchOptions};
+use default_struct_builder::DefaultBuilder;
+use leptos::*;
+use std::cell::RefCell;
+use std::marker::PhantomData;
+use std::rc::Rc;
+use wasm_bindgen::prelude::*;
+
+/// Reactive [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
+///
+/// Detects that a target element's visibility inside the viewport.
+///
+/// ## Demo
+///
+/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_intersection_observer)
+///
+/// ## Usage
+///
+/// ```
+/// # use leptos::*;
+/// # use leptos_use::use_intersection_observer;
+/// #
+/// # #[component]
+/// # fn Demo(cx: Scope) -> impl IntoView {
+/// let el = create_node_ref(cx);
+/// let (is_visible, set_visible) = create_signal(cx, false);
+///
+/// use_intersection_observer(
+/// cx,
+/// el,
+/// move |entries, _| {
+/// set_visible(entries[0].is_intersecting());
+/// },
+/// );
+///
+/// view! { cx,
+///
+///
"Hello World"
+///
+/// }
+/// # }
+/// ```
+///
+/// ## See also
+///
+/// * [`use_element_visibility`]
+pub fn use_intersection_observer(
+ cx: Scope,
+ target: El,
+ callback: F,
+) -> UseIntersectionObserverReturn
+where
+ (Scope, El): Into>,
+ T: Into + Clone + 'static,
+ F: FnMut(Vec, web_sys::IntersectionObserver)
+ + Clone
+ + 'static,
+{
+ use_intersection_observer_with_options::(
+ cx,
+ target,
+ callback,
+ UseIntersectionObserverOptions::default(),
+ )
+}
+
+/// Version of [`use_intersection_observer`] that takes a [`UseIntersectionObserverOptions`]. See [`use_intersection_observer`] for how to use.
+pub fn use_intersection_observer_with_options(
+ cx: Scope,
+ target: El,
+ callback: F,
+ options: UseIntersectionObserverOptions,
+) -> UseIntersectionObserverReturn
+where
+ (Scope, El): Into>,
+ T: Into + Clone + 'static,
+ (Scope, RootEl): Into>,
+ RootT: Into + Clone + 'static,
+ F: FnMut(Vec, web_sys::IntersectionObserver)
+ + Clone
+ + 'static,
+{
+ let UseIntersectionObserverOptions {
+ immediate,
+ root,
+ root_margin,
+ thresholds,
+ ..
+ } = options;
+
+ let (is_active, set_active) = create_signal(cx, immediate);
+
+ let observer: Rc>> = Rc::new(RefCell::new(None));
+
+ let obs = Rc::clone(&observer);
+ let cleanup = move || {
+ if let Some(o) = obs.take() {
+ o.disconnect();
+ }
+ };
+
+ let target = (cx, target).into();
+ let root = root.map(|root| (cx, root).into());
+ let clean = cleanup.clone();
+
+ let stop_watch = watch_with_options(
+ cx,
+ move || {
+ (
+ target.get(),
+ root.as_ref().map(|root| root.get()),
+ is_active.get(),
+ )
+ },
+ move |values, _, _| {
+ let (target, root, is_active) = values;
+
+ clean();
+
+ if !is_active {
+ return;
+ }
+
+ if let Some(target) = target {
+ let mut callback = callback.clone();
+ let closure =
+ Closure::::new(
+ move |entries: js_sys::Array, observer| {
+ callback(
+ entries
+ .to_vec()
+ .into_iter()
+ .map(|v| {
+ v.unchecked_into::()
+ })
+ .collect(),
+ observer,
+ );
+ },
+ );
+
+ let mut options = web_sys::IntersectionObserverInit::new();
+ options.root_margin(&root_margin).threshold(
+ &thresholds
+ .iter()
+ .copied()
+ .map(JsValue::from)
+ .collect::(),
+ );
+
+ if let Some(Some(root)) = root {
+ let root: web_sys::Element = root.clone().into();
+ options.root(Some(&root));
+ }
+
+ let obs = web_sys::IntersectionObserver::new_with_options(
+ closure.as_ref().unchecked_ref(),
+ &options,
+ )
+ .expect("failed to create IntersectionObserver");
+
+ closure.forget();
+
+ let target: web_sys::Element = target.clone().into();
+ obs.observe(&target);
+
+ observer.replace(Some(obs));
+ }
+ },
+ WatchOptions::default().immediate(immediate),
+ );
+
+ let clean = cleanup.clone();
+
+ let stop = move || {
+ clean();
+ stop_watch();
+ };
+
+ on_cleanup(cx, stop.clone());
+
+ let clean = cleanup.clone();
+
+ UseIntersectionObserverReturn {
+ is_active: is_active.into(),
+ pause: move || {
+ clean();
+ set_active(false);
+ },
+ resume: move || {
+ cleanup();
+ set_active(true);
+ },
+ stop,
+ }
+}
+
+/// Options for [`use_intersection_observer_with_options`].
+#[derive(DefaultBuilder)]
+pub struct UseIntersectionObserverOptions
+where
+ (Scope, El): Into>,
+ T: Into + Clone + 'static,
+{
+ /// If `true`, the `IntersectionObserver` will be attached immediately. Otherwise it
+ /// will only be attached after the returned `resume` closure is called. That is
+ /// `use_intersections_observer` will be started "paused".
+ immediate: bool,
+
+ /// A `web_sys::Element` or `web_sys::Document` object which is an ancestor of the intended `target`,
+ /// whose bounding rectangle will be considered the viewport.
+ /// Any part of the target not visible in the visible area of the `root` is not considered visible.
+ /// Defaults to `None` (which means the root `document` will be used).
+ /// Please note that setting this to a `Some(document)` may not be supported by all browsers.
+ /// See [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#browser_compatibility)
+ root: Option,
+
+ /// A string which specifies a set of offsets to add to the root's [bounding box](https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box)
+ /// when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS
+ /// [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) property; see
+ /// [The intersection root and root margin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#the_intersection_root_and_root_margin)
+ /// for more information on how the margin works and the syntax. The default is `"0px"`.
+ #[builder(into)]
+ root_margin: String,
+
+ // TODO : validate that each number is between 0 and 1 ?
+ /// A `Vec` of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total
+ /// bounding box area for the observed target. A value of 0.0 means that even a single
+ /// visible pixel counts as the target being visible. 1.0 means that the entire target
+ /// element is visible. See [Thresholds](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#thresholds)
+ /// for a more in-depth description of how thresholds are used.
+ /// The default is a single threshold of `[0.0]`.
+ thresholds: Vec,
+
+ #[builder(skip)]
+ _marker: PhantomData,
+}
+
+impl Default for UseIntersectionObserverOptions {
+ fn default() -> Self {
+ Self {
+ immediate: true,
+ root: None,
+ root_margin: "0px".into(),
+ thresholds: vec![0.0],
+ _marker: PhantomData,
+ }
+ }
+}
+
+/// The return value of [`use_intersection_observer`].
+pub struct UseIntersectionObserverReturn
+where
+ StopFn: Fn() + Clone,
+ PauseFn: Fn() + Clone,
+ ResumeFn: Fn() + Clone,
+{
+ /// Pauses the `IntersectionObserver` observations. Will cause `is_active = false`.
+ pub pause: PauseFn,
+ /// Resumes the `IntersectionObserver` observations. Will cause `is_active = true`.
+ pub resume: ResumeFn,
+ /// Stops the `IntersectionObserver` observations altogether.
+ pub stop: StopFn,
+ /// A signal which is `true` when the `IntersectionObserver` is active, and `false` when paused or stopped.
+ pub is_active: Signal,
+}