Forwarding props to an underlying component

[jakesarjeant]

When using React, I often create components that are "wrappers" around existing HTML elements. For example, MyAppButton would be a component that wraps an HTML <button>, applies my styles and maybe some special behaviors like a custom tooltip.

For convenience, I would declare the props as type MyButtonProps = {...} & React.ButtonHTMLAttributes<...> and then forward the rest of the props with {...props}. Here's a pseudo-code example:

type MyButtonProps = {
    tooltip: ReactNode
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

function MyButton(props: MyButtonProps) {
    return <Wrapper>
        <Tooltip>{props.tooltip}</Tooltip>
        <button {...props}/>
    </Wrapper>
}

// Later, when using the button
<MyButton onClick={callback}>Do Stuff</MyButton> // I can use onClick even though it's not explicitly mentioned in the function.

I imagined I'd be able to do something along the lines of this in dioxus (pseudo-code again):

#[derive(Clone, PartialEq, Props)]
pub struct MyButtonProps {
    tooltip: String,
    #[props(flatten)]
    button_props: HTMLButtonProps,
}

#[component]
pub fn MyButton(props: MyButtonProps) -> Element {
    rsx! {
        Wrapper {
            Tooltip { tooltip: props.tooltip }
            button { ..props.button }
        }
    }
}

// and then:
MyButton { onclick: move |_| {...} }

But after looking around the docs for a bit, it seems like that's not a thing? Am I stuck defining each and every prop I want to forward explicitly by adding a corresponding prop to my component's props?

[jakesarjeant]

Oh, wait, just discovered #1179. So, looks like this is coming in a release soon.

Welp, I feel stupid now