How to share Razor components with the need for interactivity in a Razor Class Library (.Net 8)

Question

I have created a MAUI Blazor App and a Blazor WEB App (.NET 8) and a common Razor Class Library using out of the box projects.

My problem is the how to put the Counter.Razor page into the Razor Class Library. The Counter.Razor file needs interactivity, so in the Web App-version there is the line:

@rendermode InteractiveAuto

This line is not recognized by the MAUI Blazor Hybrid app, so this will give an compiler error.

If the line is deleted, the MAUI Blazor Hybrid app will work as expected, but the Web App will have no interactivity.

What is the correct/best way to share Razor components with the need for interactivity in a Razor Class Library?

Answer 1

As per the Ms Docs, that @Brian linked in the comments.

In most cases, reusable component authors should not specify a render mode, even when interactivity is required. This is because the component author doesn't know whether the app enables support for InteractiveServer, InteractiveWebAssembly, or both with InteractiveAuto. By not specifying a @rendermode, the component author leaves the choice to the app developer.

It's recommended to not declare @rendermode in the components that are in a Razor Class Library, instead they should be applied the @rendermode when the component is instantiated. e.g.

<Counter @rendermode="InteractiveServer" />