# dioxus-hoverfx
Dioxus components and native metadata for worker-first cursor hover effects.
This crate is part of the Dioxus SSR package workspace. The APIs are pre-1.0 and may change between releases while the package family stabilizes.
## Install
```toml
[dependencies]
dioxus-hoverfx = "0.1.0-alpha.1"
```
## What It Provides
- `HoverFxProvider`, `HoverFxTarget`, and `HoverFxCard` components.
- SSR-safe controls for radius, shape, falloff, and strength.
- Native package action metadata for init, refresh, and control updates.
- Re-exports for `dioxus-hoverfx-core` config, registry, presets, shapes, falloff, renderer, and helpers.
## Targets
```rust
use dioxus::prelude::*;
use dioxus_hoverfx::{
HoverFxCard, HoverFxFalloff, HoverFxPreset, HoverFxProvider, HoverFxShape, HoverFxTarget,
};
#[component]
fn HoverFxDemo() -> Element {
rsx! {
HoverFxProvider { class: "hoverfx-grid",
HoverFxCard {
preset: HoverFxPreset::Spotlight,
radius: 320,
shape: HoverFxShape::Circle,
falloff: HoverFxFalloff::Smooth,
strength: 1.2,
class: "demo-card",
"Spotlight card"
}
HoverFxTarget {
effect: "brand-glow",
radius: 420,
shape: HoverFxShape::RoundedRect,
falloff: HoverFxFalloff::Exponential,
class: "demo-card custom-hoverfx",
"Custom CSS/Rust effect target"
}
}
}
}
```
Tagged targets emit `data-dxh-effect` and optional override attributes for radius, shape, falloff, and strength. The runtime can activate effects when the cursor is near the target, not only after the pointer enters the element.
## Controls
```rust
use dioxus::prelude::*;
use dioxus_hoverfx::{
HoverFxFalloffSelect, HoverFxRadiusSlider, HoverFxShapeSelect, HoverFxStrengthSlider,
};
#[component]
fn HoverFxControls() -> Element {
rsx! {
div { class: "hoverfx-controls",
HoverFxRadiusSlider { value: 280, apply_to_all: true }
HoverFxShapeSelect { apply_to_all: true }
HoverFxFalloffSelect { apply_to_all: true }
HoverFxStrengthSlider { value: 100, apply_to_all: true }
}
}
}
```
Controls render SSR-safe HTML using resumability attributes:
- `data-dxr-on-input="hoverfx.radius"`
- `data-dxr-on-change="hoverfx.shape"`
- `data-dxr-on-change="hoverfx.falloff"`
- `data-dxr-on-input="hoverfx.strength"`
Each control includes stable generated ids, accessible labels, and `aria-live` output/current-value text.
By default, control updates preserve per-target radius, shape, falloff, and strength attributes. Set `apply_to_all: true` to emit `data-dxh-apply-to="all"` and make a lab control override every target on the page, including targets with their own preset defaults.
## Native Metadata
Use `hoverfx_native_package_actions(route)` to advertise native-port actions for non-web shells. `hoverfx_native_action` returns the configured handler id and fallback mode so native hosts can mirror the same controls.
Workspace package dependencies:
- `dioxus-hoverfx-core`
- `dioxus-native-port`
## Feature Flags
- `default`: `web`
- `desktop`: `dioxus/desktop`
- `native`: `dioxus/native`, `dioxus-native-port/native`
- `server`: `dioxus/server`
- `web`: `dioxus/web`, `dioxus-native-port/web`
## License
Licensed under either of:
- MIT license ([LICENSE-MIT](https://github.com/Collin-Budrick/dioxus_template/blob/main/LICENSE-MIT))
- Apache License, Version 2.0 ([LICENSE-APACHE](https://github.com/Collin-Budrick/dioxus_template/blob/main/LICENSE-APACHE))
Repository: <https://github.com/Collin-Budrick/dioxus_template>