feat: add dioxus support

Cargo.toml

@@ -17,11 +17,13 @@ exclude = ["assets", "examples"]
 [dependencies]
 wasm-bindgen = "0.2.99"
 web-sys = { version = "0.3.76", features = ["Window", "ScrollToOptions", "ScrollBehavior", "DomRect", "Element"] }
-gloo = { version = "0.11.0", features = ["utils"], optional = true }
+gloo = { version = "0.11.0", features = ["utils"] }
 yew = { version = "0.21.0", default-features = false, optional = true }
+dioxus = { version = "0.6.1", optional = true }
 
 [features]
-yew = ["dep:yew", "gloo"]
+yew = ["dep:yew"]
+dio = ["dioxus", ]
 
 [profile.release]
 opt-level = "z"

DIOXUS.md

@@ -0,0 +1,87 @@
+## 🧬 Scroll RS Dioxus Usage
+
+Adding Scroll-RS to your Dioxus project is easy:
+
+1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions.
+
+1. Add `scroll-rs` to your dependencies:
+
+   ```sh
+   cargo add scroll-rs --features=dio
+   ```
+
+1. Import `Scroll` into your component and start enhancing your app's scroll functionality.
+
+## 🛠️ Usage
+
+Here's an example of integrating `scroll-rs` into your Dioxus app:
+
+```rust
+use scroll_rs::dioxus::Scroll;
+use scroll_rs::Behavior;
+use dioxus::prelude::*;
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        div {
+            class: "min-h-screen bg-gray-900 text-white p-8",
+            h1 {
+                class: "text-4xl font-bold text-center mb-8",
+                "Scroll-RS Demo"
+            }
+
+            // Scrollable content
+            div {
+                id: "top",
+                class: "h-96 bg-gray-700 p-8 text-center",
+                h2 {
+                    class: "text-3xl font-bold",
+                    "Top of the Page"
+                }
+                p { "Scroll down to see buttons in action!" }
+            }
+
+            div {
+                id: "bottom",
+                class: "h-96 bg-gray-800 p-8 text-center",
+                h2 {
+                    class: "text-3xl font-bold",
+                    "Bottom of the Page"
+                }
+                p { "You reached the bottom!" }
+            }
+
+            // Scroll components
+            Scroll {
+                style: "position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;",
+                icon: rsx! { span { "↑" } },
+                scroll_id: "top"
+            }
+            Scroll {
+                style: "position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;",
+                icon: rsx! { span { "↓" } },
+                scroll_id: "bottom"
+            }
+        }
+    }
+}
+```
+
+## 🔧 Props
+
+| Property      | Type           | Description                                                        | Default         |
+| ------------- | -------------- | ------------------------------------------------------------------ | --------------- |
+| `style`       | `&'static str` | Inline CSS styles for the scroll button.                           | Default styling |
+| `class`       | `&'static str` | Custom CSS classes for styling the button.                         | None            |
+| `icon`        | `Element`      | Custom icon (HTML/SVG) for the scroll button.                      | Default SVG     |
+| `behavior`    | `Behavior`     | Scrolling behavior: `Smooth`, `Instant`.                           | `Smooth`        |
+| `top`         | `f64`          | Target top position for scrolling.                                 | `0.0`           |
+| `left`        | `f64`          | Target left position for scrolling (horizontal scrolling).         | `0.0`           |
+| `offset`      | `f64`          | Offset to apply when scrolling to the target position.             | `0.0`           |
+| `delay`       | `u32`          | Delay (in ms) before initiating the scroll.                        | `0`             |
+| `auto_hide`   | `bool`         | Whether to hide the button automatically based on scroll position. | `true`          |
+| `threshold`   | `f64`          | Scroll threshold to determine button visibility.                   | `20.0` px       |
+| `update_hash` | `bool`         | Whether to update the URL hash during scrolling.                   | `true`          |
+| `show_id`     | `&'static str` | ID of the target element for the scroll button visibility logic.   | None            |
+| `scroll_id`   | `&'static str` | ID of the target container to scroll to.                           | None            |

README.md

@@ -33,78 +33,13 @@ The following are some of the reasons why Scroll-RS is a great addition to your
 1. **👀 Auto-Hide**: Automatically hide or show based on user-defined thresholds.
 1. **🔧 Flexible Offsets**: Adjust scrolling positions and delays with ease.
 
-## ⚙️ Yew Installation
-
-Adding Scroll-RS to your project is simple:
-
-1. Ensure your project is set up with a Wasm-based framework like **Yew**. Refer to their [Getting Started Guide](https://yew.rs/docs/getting-started/introduction) for setup instructions.
-
-1. Add `scroll-rs` to your dependencies:
-
-   ```sh
-   cargo add scroll-rs --features=yew
-   ```
-
-1. Import `Scroll` into your component and start enhancing your app's scroll functionality.
-
-## 🛠️ Usage
-
-Below is an example of how to integrate `Scroll-RS` into your Yew app:
-
-```rust
-use scroll_rs::yew::{Behavior, Scroll};
-use yew::prelude::*;
-
-#[function_component(Home)]
-pub fn home() -> Html {
-    html! {
-        <div class="min-h-screen bg-gray-900 text-white p-8">
-            <h1 class="text-4xl font-bold text-center mb-8">{ "Scroll-RS Demo" }</h1>
-
-            // Scrollable content
-            <div id="top" class="h-96 bg-gray-700 p-8 text-center">
-                <h2 class="text-3xl font-bold">{ "Top of the Page" }</h2>
-                <p>{ "Scroll down to see buttons in action!" }</p>
-            </div>
-
-            <div id="bottom" class="h-96 bg-gray-800 p-8 text-center">
-                <h2 class="text-3xl font-bold">{ "Bottom of the Page" }</h2>
-                <p>{ "You reached the bottom!" }</p>
-            </div>
-
-            // Scroll components
-            <Scroll
-                style="position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;"
-                content={html! { <span>{"↑"}</span> }}
-                scroll_id="top"
-            />
-            <Scroll
-                style="position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;"
-                content={html! { <span>{"↓"}</span> }}
-                scroll_id="bottom"
-            />
-        </div>
-    }
-}
-```
-
-## 🔧 Props
-
-| Property       | Type              | Description                                                        | Default           |
-|----------------|-------------------|--------------------------------------------------------------------|-------------------|
-| `style`        | `&'static str`    | Inline CSS styles for the scroll button.                          | Default styling   |
-| `class`        | `&'static str`    | Custom CSS classes for styling the button.                        | None              |
-| `content`      | `Html`            | Custom content (HTML/SVG) for the scroll button.                  | Default SVG       |
-| `behavior`     | `Behavior`        | Scrolling behavior: `Smooth`, `Instant`.                          | `Smooth`          |
-| `top`          | `f64`             | Target top position for scrolling.                                | `0.0`             |
-| `left`         | `f64`             | Target left position for scrolling (horizontal scrolling).         | `0.0`             |
-| `offset`       | `f64`             | Offset to apply when scrolling to the target position.            | `0.0`             |
-| `delay`        | `u32`             | Delay (in ms) before initiating the scroll.                       | `0`               |
-| `auto_hide`    | `bool`            | Whether to hide the button automatically based on scroll position.| `true`            |
-| `threshold`    | `f64`             | Scroll threshold to determine button visibility.                  | `20.0` px         |
-| `update_hash`  | `bool`            | Whether to update the URL hash during scrolling.                  | `true`            |
-| `show_id`      | `&'static str`    | ID of the target element for the scroll button visibility logic.  | None              |
-| `scroll_id`    | `&'static str`    | ID of the target container to scroll to.                          | None              |
+## Y Yew Usage
+
+Refer to [our guide](YEW.md) to integrate this component into your Yew app.
+
+## 🧬 Dioxus Usage
+
+Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app.
 
 ## 🤝 Contributions
 

YEW.md

@@ -0,0 +1,73 @@
+## Y Scroll RS Yew Usage
+
+Adding Scroll-RS to your project is simple:
+
+1. Make sure your project is set up with **Yew**. Refer to their [Getting Started Guide](https://yew.rs/docs/getting-started/introduction) for setup instructions.
+
+1. Add `scroll-rs` to your dependencies:
+
+   ```sh
+   cargo add scroll-rs --features=yew
+   ```
+
+1. Import `Scroll` into your component and start enhancing your app's scroll functionality.
+
+## 🛠️ Usage
+
+Below is an example of how to integrate `scroll-rs` into your Yew app:
+
+```rust
+use scroll_rs::yew::Scroll;
+use scroll_rs::Behavior;
+use yew::prelude::*;
+
+#[function_component(Home)]
+pub fn home() -> Html {
+    html! {
+        <div class="min-h-screen bg-gray-900 text-white p-8">
+            <h1 class="text-4xl font-bold text-center mb-8">{ "Scroll-RS Demo" }</h1>
+
+            // Scrollable content
+            <div id="top" class="h-96 bg-gray-700 p-8 text-center">
+                <h2 class="text-3xl font-bold">{ "Top of the Page" }</h2>
+                <p>{ "Scroll down to see buttons in action!" }</p>
+            </div>
+
+            <div id="bottom" class="h-96 bg-gray-800 p-8 text-center">
+                <h2 class="text-3xl font-bold">{ "Bottom of the Page" }</h2>
+                <p>{ "You reached the bottom!" }</p>
+            </div>
+
+            // Scroll components
+            <Scroll
+                style="position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;"
+                icon={html! { <span>{"↑"}</span> }}
+                scroll_id="top"
+            />
+            <Scroll
+                style="position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;"
+                icon={html! { <span>{"↓"}</span> }}
+                scroll_id="bottom"
+            />
+        </div>
+    }
+}
+```
+
+## 🔧 Props
+
+| Property      | Type           | Description                                                        | Default         |
+| ------------- | -------------- | ------------------------------------------------------------------ | --------------- |
+| `style`       | `&'static str` | Inline CSS styles for the scroll button.                           | Default styling |
+| `class`       | `&'static str` | Custom CSS classes for styling the button.                         | None            |
+| `icon`        | `Html`         | Custom icon (HTML/SVG) for the scroll button.                      | Default SVG     |
+| `behavior`    | `Behavior`     | Scrolling behavior: `Smooth`, `Instant`.                           | `Smooth`        |
+| `top`         | `f64`          | Target top position for scrolling.                                 | `0.0`           |
+| `left`        | `f64`          | Target left position for scrolling (horizontal scrolling).         | `0.0`           |
+| `offset`      | `f64`          | Offset to apply when scrolling to the target position.             | `0.0`           |
+| `delay`       | `u32`          | Delay (in ms) before initiating the scroll.                        | `0`             |
+| `auto_hide`   | `bool`         | Whether to hide the button automatically based on scroll position. | `true`          |
+| `threshold`   | `f64`          | Scroll threshold to determine button visibility.                   | `20.0` px       |
+| `update_hash` | `bool`         | Whether to update the URL hash during scrolling.                   | `true`          |
+| `show_id`     | `&'static str` | ID of the target element for the scroll button visibility logic.   | None            |
+| `scroll_id`   | `&'static str` | ID of the target container to scroll to.                           | None            |

examples/dioxus/.gitignore

@@ -0,0 +1,2 @@
+target/**/*
+dist/**/*

examples/dioxus/Cargo.toml

@@ -0,0 +1,22 @@
+[package]
+name = "scroll-rs-dioxus-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { version = "0.6.1", features = ["web"] }
+scroll-rs = { path = "../../", features = ["dio"] }
+dioxus-logger = "0.6.1"
+regex = "1.11.1"
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

examples/dioxus/Dioxus.toml

@@ -0,0 +1,48 @@
+[application]
+
+# App (Project) Name
+name = "input-rs"
+
+# Dioxus App Default Platform
+# desktop, web
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (assets) file folder
+asset_dir = "assets"
+
+[web.app]
+
+# HTML title tag content
+title = "input-rs"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "assets"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = [
+   # online cdn.
+   "https://unpkg.com/[email protected]/dist/tailwind.min.css"
+]
+
+# Javascript code file
+script = [
+   # online cdn.
+   "https://kit.fontawesome.com/8f223ead6e.js"
+]
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []