request: use_node_size hook about freya HOT 8 CLOSED

That works great. I spent an hour trying to find out why it's not logging haha.

I think that solved my issue. I'll close this issue. Thank you for the fast respond!

from freya.

That's exactly what use_node/use_node_signal do

from freya.

https://github.com/marc2332/freya/blob/main/examples/min_max_sizing.rs

from freya.

Hmm okay. I was having trouble trying to log out the size of the node inside my use_effect. Turns out it only trigger when you include the size in the rendering code.

fn app() -> Element {
    let (node_ref, size) = use_node_signal();
    use_effect({
        move || {
            println!("{:?}", size().area.width()); // This won't print every time I resize
        }
    });
    rsx!(
        rect {
            width: "50%",
            height: "50%",
            min_width: "200",
            min_height: "100",
            max_width: "300",
            max_height: "250",
            background: "black",
            reference: node_ref,
            label {
                color: "white",
                // "Size: {size().area.width()}x{size().area.height()}"
            }
        }
    )
}

fn app() -> Element {
    let (node_ref, size) = use_node_signal();
    use_effect({
        move || {
            println!("{:?}", size().area.width()); // This will print
        }
    });
    rsx!(
        rect {
            width: "50%",
            height: "50%",
            min_width: "200",
            min_height: "100",
            max_width: "300",
            max_height: "250",
            background: "black",
            reference: node_ref,
            label {
                color: "white",
                "Size: {size().area.width()}x{size().area.height()}"
            }
        }
    )
}

from freya.

Hmm okay. I was having trouble trying to log out the size of the node inside my use_effect. Turns out it only trigger when you include the size in the rendering code.

fn app() -> Element {
    let (node_ref, size) = use_node_signal();
    use_effect({
        move || {
            println!("{:?}", size().area.width()); // This won't print every time I resize
        }
    });
    rsx!(
        rect {
            width: "50%",
            height: "50%",
            min_width: "200",
            min_height: "100",
            max_width: "300",
            max_height: "250",
            background: "black",
            reference: node_ref,
            label {
                color: "white",
                // "Size: {size().area.width()}x{size().area.height()}"
            }
        }
    )
}

fn app() -> Element {
    let (node_ref, size) = use_node_signal();
    use_effect({
        move || {
            println!("{:?}", size().area.width()); // This will print
        }
    });
    rsx!(
        rect {
            width: "50%",
            height: "50%",
            min_width: "200",
            min_height: "100",
            max_width: "300",
            max_height: "250",
            background: "black",
            reference: node_ref,
            label {
                color: "white",
                "Size: {size().area.width()}x{size().area.height()}"
            }
        }
    )
}

That is actually a Dioxus bug I believe

DioxusLabs/dioxus#2347

from freya.

Let me see if I can get around it

from freya.

@ZeroX-DG I can't fix it from Freya but there is a workaround for you I actually use in some places

Use use_memo instead of use_effect

fn app() -> Element {
    let (node_ref, size) = use_node_signal();
    use_memo(move || {
        println!("{:?}", size().area.width());
    });
    rsx!(
        rect {
            width: "50%",
            height: "50%",
            min_width: "200",
            min_height: "100",
            max_width: "300",
            max_height: "250",
            background: "black",
            reference: node_ref,
            label {
                color: "white",
                // "Size: {size().area.width()}x{size().area.height()}"
            }
        }
    )
}

from freya.

Awesome 😄

from freya.