mirror of
https://github.com/DioxusLabs/dioxus
synced 2025-01-11 20:28:55 +00:00
508c560320
This change switches back to the original `ctx<props>` syntax for commponents. This lets lifetime elision to remove the need to match exactly which lifetime (props or ctx) gets carried to the output. As such, `Props` is currently required to be static. It *is* possible to loosen this restriction, and will be done in the future, though only through adding metadata about the props through the Props derive macro. Implementing the IS_STATIC trait is unsafe, so the derive macro will do it through some heuristics. For now, this unlocks sharing vnodes from parents to children, enabling pass-thru components, fragments, portals, etc.
45 lines
1.5 KiB
Rust
45 lines
1.5 KiB
Rust
//! RecoilAPI Pattern
|
|
//! ----------------
|
|
//! This example demonstrates how the use_recoil_callback hook can be used to build view controllers.
|
|
//! These view controllers are cheap to make and can be easily shared across the app to provide global
|
|
//! state logic to many components.
|
|
//!
|
|
//! This pattern is meant to replace the typical use_dispatch pattern used in Redux apps.
|
|
|
|
use dioxus_core::prelude::*;
|
|
use recoil::*;
|
|
|
|
const TITLE: Atom<String> = |_| format!("Heading");
|
|
const SUBTITLE: Atom<String> = |_| format!("Subheading");
|
|
|
|
struct TitleController(RecoilApi);
|
|
impl TitleController {
|
|
fn new(api: RecoilApi) -> Self {
|
|
Self(api)
|
|
}
|
|
fn uppercase(&self) {
|
|
self.0.modify(&TITLE, |f| *f = f.to_uppercase());
|
|
self.0.modify(&SUBTITLE, |f| *f = f.to_uppercase());
|
|
}
|
|
fn lowercase(&self) {
|
|
self.0.modify(&TITLE, |f| *f = f.to_lowercase());
|
|
self.0.modify(&SUBTITLE, |f| *f = f.to_lowercase());
|
|
}
|
|
}
|
|
|
|
fn main() {
|
|
wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(|ctx| {
|
|
let title = use_read(ctx, &TITLE);
|
|
let subtitle = use_read(ctx, &SUBTITLE);
|
|
let controller = use_recoil_api(ctx, TitleController::new);
|
|
|
|
rsx! { in ctx,
|
|
div {
|
|
"{title}"
|
|
"{subtitle}"
|
|
button { onclick: move |_| controller.uppercase(), "Uppercase" }
|
|
button { onclick: move |_| controller.lowercase(), "Lowercase" }
|
|
}
|
|
}
|
|
}))
|
|
}
|