Extending Components with Existing Props

[McleanWorkshield]

Hey! I'd love to make a component that is able to extend from an existing component or serve as a base component.

For example, I'd love to allow all props that might pass into a to be available for a button.

// In React
const Button<ButtonProps> = (props) => {
  return <button {...props} >label</button>
}

That way I can pass all the available attributes as needed with custom reusable styling.

Maybe there is a better way to do this in Leptos?

[gbj]

Forgetting, for a second, the JavaScript parallel: How would you think about the types for this, in Rust?

It's genuinely difficult, and a place where JS/TS inheritance (vs. Rust's composition of traits) combined with the fact that the DOM is designed for/in JavaScript makes it much easier to do this in JS/TS frameworks.

(The short answer is that there is not a way, at present, to do what you're asking.)

[McleanWorkshield]

Thanks for the answer. After fiddling, I realized that I was able to create button component and then just attach an on:click handler to the component without having to pass the on click event to the button. Here is what I ended up doing for the time being.

1. Create the button component.

use leptos::*;

#[component]
pub fn Button(cx: Scope, children: Children) -> impl IntoView {
    view! { cx,
        <button
            type="button"
            class="...all-my-classes-to-create-reusable-button"
        >
            {children(cx)}
        </button>
    }
}

2. I used the component and attach an on:click handler.

use crate::components::{
    button::*,
};
use leptos::*;

#[component]
pub fn Incidents(cx: Scope) -> impl IntoView {

    view! { cx,
        <h1 class="text-red-400">"Incidents"</h1>
        <Button on:click=move |_| log!("This logs Things.") >"Log Something"</Button>
    }
}