feat(dioxus): add floating-ui-dioxus (#151)

Author: DanielleHuisman

Cargo.lock

@@ -19,9 +19,11 @@ version = "0.4.1"
 cfg-if = "1.0.0"
 console_error_panic_hook = "0.1.7"
 console_log = "1.0.0"
+dioxus = "0.6.3"
 dyn_derive = "0.3.4"
 dyn_std = "0.3.3"
 floating-ui-core = { path = "./packages/core", version = "0.4.0" }
+floating-ui-dioxus = { path = "./packages/dioxus", version = "0.4.0" }
 floating-ui-dom = { path = "./packages/dom", version = "0.4.0" }
 floating-ui-leptos = { path = "./packages/leptos", version = "0.4.0" }
 floating-ui-utils = { path = "./packages/utils", version = "0.4.0" }

Cargo.toml

@@ -15,25 +15,24 @@ Rust port of [Floating UI](https://floating-ui.com).
 Rust Floating UI is available for these Rust frameworks:
 
 -   [DOM](./packages/dom) ([`web-sys`](https://rustwasm.github.io/wasm-bindgen/web-sys/index.html))
+-   [Dioxus](https://dioxuslabs.com/)
 -   [Leptos](./packages/leptos)
 -   [Yew](https://yew.rs/)
 
-The following frameworks are under consideration:
-
--   [Dioxus](https://dioxuslabs.com/)
-
 ## Examples
 
 See [the Rust Floating UI book](https://floating-ui.rustforweb.org/) for examples.
 
 Each framework has an implementations of the [Floating UI tutorial](https://floating-ui.com/docs/tutorial) as an example:
 
 -   [DOM](./packages/dom/example)
+-   [Dioxus](./packages/dioxus/example)
 -   [Leptos](./packages/leptos/example)
 -   [Yew](./packages/yew/example)
 
 Additionally, implementations of [Floating UI tests](https://github.com/floating-ui/floating-ui/tree/master/packages/dom/test) are more complex examples:
 
+-   [Dioxus](./packages/dioxus/tests)
 -   [Leptos](./packages/leptos/tests)
 -   [Yew](./packages/yew/tests)
 
@@ -44,6 +43,7 @@ See [the Rust Floating UI book](https://floating-ui.rustforweb.org/) for documen
 Documentation for the crates is available on [Docs.rs](https://docs.rs/):
 
 -   [`floating-ui-core`](https://docs.rs/floating-ui-core/latest/floating_ui_core/)
+-   [`floating-ui-dioxus`](https://docs.rs/floating-ui-dioxus/latest/floating_ui_dioxus/)
 -   [`floating-ui-dom`](https://docs.rs/floating-ui-dom/latest/floating_ui_dom/)
 -   [`floating-ui-leptos`](https://docs.rs/floating-ui-leptos/latest/floating_ui_leptos/)
 -   [`floating-ui-utils`](https://docs.rs/floating-ui-utils/latest/floating_ui_utils/)

README.md

@@ -19,6 +19,7 @@
 -   [Platform](./platform.md)
 -   [Frameworks](./frameworks/README.md)
     -   [DOM](./frameworks/dom.md)
+    -   [Dioxus](./frameworks/dioxus.md)
     -   [Leptos](./frameworks/leptos.md)
     -   [Yew](./frameworks/yew.md)
 -   [Contributing]()

book/src/SUMMARY.md

@@ -66,6 +66,27 @@ floating_el.remove();
 cleanup();
 ```
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+If you're conditionally rendering the floating element (recommended), use the `while_elements_mounted` option:
+
+```rust,ignore
+use floating_ui_dioxus::{use_auto_update, use_floating, UseFloatingOptions};
+
+let auto_update = use_auto_update();
+
+use_floating(
+    reference_el,
+    floating_el,
+    UseFloatingOptions::default().while_elements_mounted((*(auto_update())).clone()),
+);
+```
+
+`while_elements_mounted` automatically handles calling and cleaning up `auto_update` based on the presence of the reference and floating element.
+
+See the documentation on [docs.rs](https://docs.rs/floating-ui-dioxus/latest/floating_ui_dioxus/#functions) for all alternatives of the `use_auto_update` hook.
+
 {{#endtab }}
 {{#tab name="Leptos" }}
 

book/src/auto-update.md

@@ -24,6 +24,17 @@ use floating_ui_dom::compute_position;
 -   [View on docs.rs](https://docs.rs/floating-ui-dom/latest/floating_ui_dom/)
 -   [View source](https://github.com/RustForWeb/floating-ui/tree/main/packages/dom)
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+<div class="warning">
+
+**Non-framework API**
+
+[`use_floating()`](./frameworks/dioxus.md) should be used instead with a framework. If you are using a base package, change the package with the package switcher above.
+
+</div>
+
 {{#endtab }}
 {{#tab name="Leptos" }}
 
@@ -193,6 +204,17 @@ let cleanup = auto_update(reference_el, floating_el, Rc::new(|| {
 cleanup();
 ```
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+<div class="warning">
+
+**Non-framework API**
+
+[`use_floating()`](./frameworks/leptos.md) should be used instead with a framework. If you are using a base package, change the package with the package switcher above.
+
+</div>
+
 {{#endtab }}
 {{#tab name="Leptos" }}
 

book/src/compute-position.md

@@ -3,5 +3,6 @@
 Rust Floating UI is available for the following frameworks:
 
 -   [DOM (`web-sys`)](./dom.md)
+-   [Dioxus](./dioxus.md)
 -   [Leptos](./leptos.md)
 -   [Yew](./yew.md)

book/src/frameworks/README.md

@@ -0,0 +1,17 @@
+# Dioxus
+
+This package provides [Dioxus](https://dioxuslabs.com/) bindings for `floating-ui-dom` - a library that provides anchor positioning for a floating element to position it next to a given reference element.
+
+## Installation
+
+```shell
+cargo add floating-ui-dioxus
+```
+
+-   [View on crates.io](https://crates.io/crates/floating-ui-dioxus)
+-   [View on docs.rs](https://docs.rs/floating-ui-dioxus/latest/floating_ui_dioxus/)
+-   [View source](https://github.com/RustForWeb/floating-ui/tree/main/packages/dioxus)
+
+## Usage
+
+TODO

book/src/frameworks/dioxus.md

@@ -17,13 +17,10 @@ It also provides features to avoid collisions with the viewport, as absolute pos
 Rust Floating UI is available for the following frameworks:
 
 -   [DOM (`web-sys`)](https://rustwasm.github.io/wasm-bindgen/web-sys/index.html)
+-   [Dioxus](https://dioxuslabs.com/)
 -   [Leptos](https://leptos.dev/)
 -   [Yew](https://yew.rs/)
 
-The following frameworks are under consideration:
-
--   [Dioxus](https://dioxuslabs.com/)
-
 See [Frameworks](./frameworks/index.md) for documentation for each framework.
 
 ## Examples

book/src/introduction.md

@@ -34,6 +34,19 @@ compute_position(
 );
 ```
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+```rust,ignore
+use_floating(
+    reference_el,
+    floating_el,
+    UseFloatingOptions::default()
+        .position(Placement::Right)
+        .middleware(vec![]),
+);
+```
+
 {{#endtab }}
 {{#tab name="Leptos" }}
 
@@ -129,6 +142,21 @@ compute_position(
 );
 ```
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+```rust,ignore
+use_floating(
+    reference_el,
+    floating_el,
+    UseFloatingOptions::default()
+        .position(Placement::Right)
+        .middleware(vec![
+            Box::new(ShiftByOnePixel::new())
+        ]),
+);
+```
+
 {{#endtab }}
 {{#tab name="Leptos" }}
 
@@ -261,6 +289,28 @@ if let Some(data) = middleware_data.get_as::<ShiftByOnePixelData>(SHIFT_BY_ONE_P
 }
 ```
 
+{{#endtab }}
+{{#tab name="Dioxus" }}
+
+```rust,ignore
+let UseFloatingReturn {
+    middleware_data,
+    ..
+} = use_floating(
+    reference_el,
+    floating_el,
+    UseFloatingOptions::default()
+        .position(Placement::Right)
+        .middleware(vec![
+            Box::new(ShiftByOnePixel::new())
+        ]),
+);
+
+if let Some(data) = middleware_data.get_as::<ShiftByOnePixelData>(SHIFT_BY_ONE_PIXEL_NAME) {
+    log::info!("{:#?}", data);
+}
+```
+
 {{#endtab }}
 {{#tab name="Leptos" }}