Lib.rs

› GUI › Dioxus
#ui #ui-framework #dom #react

dioxus-hooks

Basic useful hooks for Dioxus

by Jonathan Kelley, ealmloff and 97 contributors

21 releases

new 0.6.0-alpha.4 Nov 1, 2024
0.6.0-alpha.2 Aug 7, 2024
0.5.6 Jul 18, 2024
0.5.0 Mar 28, 2024
0.2.0 Mar 9, 2022

#194 in GUI

Download history 3761/week @ 2024-07-16 3536/week @ 2024-07-23 3873/week @ 2024-07-30 3836/week @ 2024-08-06 4064/week @ 2024-08-13 3746/week @ 2024-08-20 4547/week @ 2024-08-27 4253/week @ 2024-09-03 3849/week @ 2024-09-10 3717/week @ 2024-09-17 4552/week @ 2024-09-24 3223/week @ 2024-10-01 2807/week @ 2024-10-08 4112/week @ 2024-10-15 4514/week @ 2024-10-22 3452/week @ 2024-10-29

15,271 downloads per month
Used in 35 crates (8 directly)

MIT/Apache

600KB
11K SLoC

Dioxus Hooks

Crates.io MIT licensed Build Status Discord chat

Website | Guides | API Docs | Chat

Overview

dioxus-hooks includes some basic useful hooks for Dioxus such as:

  • use_signal
  • use_effect
  • use_resource
  • use_memo
  • use_coroutine

Unlike React, none of these hooks are foundational since they all build off the primitive use_hook. You can extend these hooks with custom hooks in your own code. If you think they would be useful for the broader community, you can open a PR to add your hook to the Dioxus Awesome list.

State Cheat Sheet

If you aren't sure what hook to use, you can use this cheat sheet to help you decide:

State Location

Depending on where you need to access the state, you can put your state in one of three places:

Location Where can you access the state? Recommended for Libraries? Examples
Hooks Any components you pass it to ✅ use_signal(|| 0), use_memo(|| state() * 2)
Context Any child components ✅ use_context_provider(|| Signal::new(0)), use_context::<Signal<i32>>()
Global Anything in your app ❌ Signal::global(|| 0)

Derived State

If you don't have an initial value for your state, you can derive your state from other states with a closure or asynchronous function:

Hook Reactive (reruns when dependencies change) Async Memorizes Output Example
use_memo ✅ ❌ ✅ use_memo(move || count() * 2)
use_resource ✅ ✅ ❌ use_resource(move || reqwest::get(format!("/users/{user_id}")))
use_future ❌ ✅ ❌ use_future(move || println!("{:?}", reqwest::get(format!("/users/{user_id}"))))

Persistent State

The core hooks library doesn't provide hooks for persistent state, but you can extend the core hooks with hooks from dioxus-sdk and the dioxus-router to provide persistent state management.

State Sharable Example
use_persistent ❌ use_persistent("unique_key", move || initial_state)
Router<Route> {} ✅ #[derive(Routable, Clone, PartialEq)] enum Route { #[route("/user/:id")] Homepage { id: u32 } }

Contributing

  • Report issues on our issue tracker.
  • Join the discord and ask questions!

License

This project is licensed under the MIT license.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.

Dependencies

~2.4–7.5MB
~65K SLoC