Toggle is hard to achieve

[Madoshakalaka]

correct me if I am wrong: this is the minimum code to achieve a toggling state:

    #[derive(PartialEq)]
    enum State {
        Show,
        Hide,
    }
    impl Default for State {
        fn default() -> Self {
            Self::Show
        }
    }
    struct Toggle;
    impl Reducible for State {
        type Action = Toggle;
        fn reduce(self: Rc<Self>, _action: Self::Action) -> Rc<Self> {
            match &*self {
                State::Show => Rc::new(Self::Hide),
                State::Hide => Rc::new(Self::Show),
            }
        }
    }

    let on_or_off = use_reducer(State::default);

a use_toggle() would be nice

[voidpumpkin]

@Madoshakalaka With the power of hooks its realy easy to do that yourself:

pub fn use_toggle<F>(init_fn: F) -> (bool,Callback<()>)
where
    F: FnOnce() -> bool,
{
    let value_handle = use_state_eq(init_fn);
    let value = *value_handle;
    
    let toggle = Callback(move |_| {
        value_handle.set(!value);
    });

    (value,toggle)
}

[Madoshakalaka]

ooo that works! Fixed a few typos and errors. For later people, this is how you do it:

pub fn use_toggle<F>(init_fn: F) -> (bool,Callback<()>)
    where
        F: FnOnce() -> bool,
{
    let value_handle = use_state_eq(init_fn);
    let value = *value_handle;

    let toggle = Callback::from(move |_| {
        value_handle.set(!value);
    });

    (value,toggle)
}

#[function_component(App)]
fn app() -> Html {
    let (value, toggle) = use_toggle(|| true);

    html! {
        <>
            <button onclick={move|_| toggle.emit(())}>{"toggle"}</button>
            <p>{format!("The value is {}", value)}</p>
        </>
    }
}

[voidpumpkin]

@Madoshakalaka what is styled_component ?

But anyway yeah looks like a good example with you change styled_component to function_component

[Madoshakalaka]

oooh sorry, edited! It's from stylist, my favorite CSS in yew solution.

[futursolo]

The use_reducer-based toggle switch can be simplified as well.

    #[derive(PartialEq, Default)]
    struct State {
        inner: bool
    }

    impl Reducible for State {
        type Action = ();
        fn reduce(self: Rc<Self>, _action: Self::Action) -> Rc<Self> {
            State { inner: !self.inner }.into()
        }
    }

    let on_or_off = use_reducer_eq(State::default);

[Madoshakalaka]

ahh much appreciated, thanks!

[Madoshakalaka]

Is use_reducer_eq necessary though? Every reduce will for sure give a different state, use_reducer will have a better performance of one less comparison.

[jetli]

Try use_bool_toggle and use_toggle from yew_hooks: https://github.com/jetli/yew-hooks