dioxus-floating 0.3.1

A floating positioning engine for Dioxus 0.7. Handles flips, shifts, and scrollable containers with ease.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

## Installation

Add the following to your `Cargo.toml`:

```toml
[dependencies]
dioxus-floating = "0.3.1"
```

# dioxus-floating

A lightweight, high-performance floating positioning library for Dioxus 0.7.

## Features
- **Smart Placement**: Automatic flip and shift logic.
- **Scroll Awareness**: Works perfectly inside `ScrollableView`.
- **Portal Friendly**: Designed to work with global layer managers.
- **GPU Accelerated**: Uses `translate3d` for buttery smooth performance.

## Quick Start
```rust
use std::rc::Rc;

use dioxus::prelude::*;
use dioxus_floating::{use_placement, FloatingOptions};

#[component]
fn App() -> Element {
    rsx! {
        ScrollableView {
            Dropdown { }
        }
    }
}
#[component]
fn Dropdown(children: Element) -> Element {
    let element_ref = use_signal(|| Option::<Rc<MountedData>>::None);
    let trigger_ref = use_signal(|| Option::<Rc<MountedData>>::None);
    
    let placement = use_placement(element_ref, trigger_ref, FloatingOptions::default());
    let element_style = use_memo(move || {
        placement.with(|pos| format!(
            "position: fixed; inset: 0px auto auto 0px; margin: 0px; transform: translate3d({}px, {}px, 0px);",
            pos.x, pos.y,
        ))
    });
    
    rsx! {
        button {
            onmounted: move |evt: MountedEvent| { trigger_ref.set(Some(evt.data.clone())) },
            "I am button!"
        }
        div {
            onmounted: move |evt: MountedEvent| { element_ref.set(Some(evt.data.clone())) },
            style: "{element_style}",
            class: if placement.is_ready { "opacity-100" } else { "opacity-0" },
            "I am floating!"
        }
    }
}
```

## Why ScrollableView?
`ScrollableView` is a required wrapper that provides a reactive context of the scrollable area. It tracks:
- **Layout changes**: Via `ResizeObserver`.
- **Scroll offsets**: Via `onscroll` event.
- **Async measurements**: Provides a `reload()` method for manual sync.

## Context Menus
Use `use_placement_on_point` to anchor elements to mouse coordinates:

```rust
let click_pos = use_signal(|| None);
let placement = use_placement_on_point(element_ref, click_pos, options);

rsx! {
    div {
        oncontextmenu: move |e| {
            e.prevent_default();
            click_pos.set(Some(e.client_coordinates()));
        },
        "Right click me"
    }
}
```

## Examples
The crate now includes standalone examples that mirror the real UI scenarios without depending on the workspace `ui` package:

```sh
dx serve --example dropdown --platform web
dx serve --example context_menu --platform web
```

- `dropdown`: two FlyonUI-styled dropdowns with different trigger layouts and placements.
- `context_menu`: a right-click menu driven by `use_placement_on_point`.

## Status
This crate is in early development (**v0.1.0**). It was built out of necessity for a complex chat application and is currently "battle-tested" there. PRs and feedback are welcome!