dioxus/docs/guide/examples/hooks_use_ref.rs

#![allow(non_snake_case)]
use dioxus::prelude::*;

fn main() {
    dioxus_desktop::launch(App);
}

// ANCHOR: component
fn App(cx: Scope) -> Element {
    let list = use_ref(&cx, Vec::new);
    let list_formatted = format!("{:?}", *list.read());

    cx.render(rsx!(
        p { "Current list: {list_formatted}" }
        button {
            onclick: move |event| {
                list.write().push(event)
            },
            "Click me!"
        }
    ))
}
// ANCHOR_END: component
Rework Guide (#486) * Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book 2022-07-07 08:50:36 +00:00			`#![allow(non_snake_case)]`
			`use dioxus::prelude::*;`

			`fn main() {`
Renderers are now packages, not features. (#387) * feat: use synchronous router design * feat: function to get router out of dom * chore: restructure workspace to use renderers as packages, not features 2022-07-09 19:15:20 +00:00			`dioxus_desktop::launch(App);`
Rework Guide (#486) * Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book 2022-07-07 08:50:36 +00:00			`}`

			`// ANCHOR: component`
			`fn App(cx: Scope) -> Element {`
Less clumsy configuration for desktop and mobile (#553) * chore: dont use prebuilt builder pattern for configuring desktop * chore: use regular config pattern for web * Chore: update docs too * chore: clean up some warnings 2022-09-13 23:22:27 +00:00			`let list = use_ref(&cx, Vec::new);`
Rework Guide (#486) * Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book 2022-07-07 08:50:36 +00:00			`let list_formatted = format!("{:?}", *list.read());`

			`cx.render(rsx!(`
			`p { "Current list: {list_formatted}" }`
			`button {`
			`onclick: move \|event\| {`
			`list.write().push(event)`
			`},`
			`"Click me!"`
			`}`
			`))`
			`}`
			`// ANCHOR_END: component`