dioxus/packages/signals/README.md

91 lines
2.1 KiB
Markdown
Raw Normal View History

2023-08-08 00:49:14 +00:00
# Dioxus Signals
Dioxus Signals is an ergonomic Copy runtime for data with local subscriptions in Dioxus.
## Copy Data
All signals implement Copy, even if the inner value does not implement copy. This makes it easy to move any data into futures or children.
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
fn app(cx: Scope) -> Element {
2023-08-08 00:49:14 +00:00
let signal = use_signal(cx, || "hello world".to_string());
spawn(async move {
// signal is Copy even though String is not copy
2023-08-08 18:12:08 +00:00
print!("{signal}");
2023-08-08 00:49:14 +00:00
});
render! {
"{signal}"
}
}
```
## Local Subscriptions
Signals will only subscribe to components when you read from the signal in that component. It will never subscribe to a component when reading data in a future or event handler.
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
2023-08-08 00:49:14 +00:00
fn app(cx: Scope) -> Element {
// Because signal is never read in this component, this component will not rerun when the signal changes
let signal = use_signal(cx, || 0);
render! {
2023-08-08 18:12:08 +00:00
button {
onclick: move |_| {
*signal.write() += 1;
},
"Increase"
2023-08-08 00:49:14 +00:00
}
for id in 0..10 {
Child {
signal: signal,
}
}
}
}
#[derive(Props, Clone, PartialEq)]
struct ChildProps {
signal: Signal<usize>,
}
fn Child(cx: Scope<ChildProps>) -> Element {
// This component does read from the signal, so when the signal changes it will rerun
render! {
"{cx.props.signal}"
}
}
```
2023-08-08 01:20:03 +00:00
Because subscriptions happen when you read from (not create) the data, you can provide signals through the normal context API:
```rust
2023-08-08 18:12:08 +00:00
use dioxus::prelude::*;
use dioxus_signals::*;
2023-08-08 01:20:03 +00:00
fn app(cx: Scope) -> Element {
// Because signal is never read in this component, this component will not rerun when the signal changes
use_context_provider(cx, || Signal::new(0));
render! {
Child {}
}
}
fn Child(cx: Scope) -> Element {
let signal: Signal<i32> = *use_context(cx).unwrap();
// This component does read from the signal, so when the signal changes it will rerun
render! {
"{signal}"
}
}
```