What about a component to NOT render a component based on breakpoints?

[darcome]

I don't know where to start from, so I cannot help, but I think this componet would be useful in FLuentUI: https://mudblazor.com/components/hidden#how-it-works
At the moment the only thing we can use is HiddenWhen in a Grid, but the problem is that the component is in any case present in the DOM, even if hidden.
It would be nice if, when hidden, is not present at all in the DOM.

For example, I have a component that is a series of selects used to filter a table. When I am on mobile,
I want the selects to be inside an accordion so that when not used they won't be using vertical space, but on a desktop they can be always visible.
If I use the HiddenWhen property, I need to duplicate the selects on the page, but that also means that I am not sure what value the variables in the code behind
will have. The value of the hidden selects or the visible ones? Instead, if the selects are not rendered at all, I would not have these problems.

If the MudHidden component is not doable, can you please suggest me a different approach?

Thanks in advance, and I hope I've been clear 🙂

[dvoituron]

This component does not yet exist in FluentUI Blazor Lib.
It might be interesting to have something like this.

Perhaps you could solve your problem by using a FluentGrid component, just to catch the OnBreakpointEnter event.

<FluentGrid OnBreakpointEnter="@OnBreakpointEnterHandler" />

@if (ScreenSize > GridItemSize.Md)
{
    <div>Only on large screen</div>
}

@code
{
    GridItemSize ScreenSize;
    void OnBreakpointEnterHandler(GridItemSize size) => ScreenSize = size;
}