What is the equivalent of this react component if made using C# and Blazor?

I'm used to just doing .NET + React, but since they improved Blazor so much with .net 8 I'm having some fun there, but there's one thing I haven't figured out yet. How to wrap existing components/create reusable ones in an easy user friendly way.

With React you can easily wrap components like the example below, pass down and do whatever you want with the props, and then just spread the rest onto them. And by directly using the correct interface (or extending it to create extra props) you get full auto complete/intellisense for the props.

Here is a simple example where you can create a styled input where the user can use it just like they would the underlying component. It would also be easy to modify this to add other props or change the behaviour. In here I add some basic styling which can be overwritten by the calling component if needed, but they also can use all the existing attributes for the input tag.

import { FC, InputHTMLAttributes } from "react";

export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement>> = (className, ...props) => {
    const baseClass = "custom-input";
    const combinedClasses = `${baseClass} ${className || ""}`.trim();

    return <input className={combinedClasses} {...props} />;
};

import { FC, InputHTMLAttributes } from "react";

export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement>> = (className, ...props) => {
    const baseClass = "custom-input";
    const combinedClasses = `${baseClass} ${className || ""}`.trim();

    return <input className={combinedClasses} {...props} />;
};

I've tried a few things. Wrapping it and using

@ChildContent

@ChildContent

is easy, but then you're not really creating a new input, you're creating something around it unlike the react version.

Ideally I would want to use it like this, where I can use the field just as if it was a regular

<InputText>

<InputText>

field, but my custom component could then set some defaults or modify the different inputs.

<InputText @bind-Value="myTextValue" class="my-class" />
<CustomInputText @bind-Value="myTextValue" class="my-class" />

<InputText @bind-Value="myTextValue" class="my-class" />
<CustomInputText @bind-Value="myTextValue" class="my-class" />

Is this possible or am I just too influenced by the JS/React way of solving things and I should be looking at it entirely differently?

What is the equivalent of this react component if made using C# and Blazor?

import { FC, InputHTMLAttributes } from "react";

export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement>> = (className, ...props) => {
    const baseClass = "custom-input";
    const combinedClasses = `${baseClass} ${className || ""}`.trim();

    return <input className={combinedClasses} {...props} />;
};

import { FC, InputHTMLAttributes } from "react";

export const CustomInput: FC<InputHTMLAttributes<HTMLInputElement>> = (className, ...props) => {
    const baseClass = "custom-input";
    const combinedClasses = `${baseClass} ${className || ""}`.trim();

    return <input className={combinedClasses} {...props} />;
};

I've tried a few things. Wrapping it and using

@ChildContent

@ChildContent

<InputText>

<InputText>

field, but my custom component could then set some defaults or modify the different inputs.

<InputText @bind-Value="myTextValue" class="my-class" />
<CustomInputText @bind-Value="myTextValue" class="my-class" />

<InputText @bind-Value="myTextValue" class="my-class" />
<CustomInputText @bind-Value="myTextValue" class="my-class" />

Is this possible or am I just too influenced by the JS/React way of solving things and I should be looking at it entirely differently?

What is the equivalent of this react component if made using C# and Blazor?

What is the equivalent of this react component if made using C# and Blazor?

Similar Threads

Similar Threads

Similar Threads