JavascriptViewportDimensions.razor

@using Microsoft.JSInterop

@implements IAsyncDisposable

<button class="[ bg-fuchsia-500 ] [ px-4 py-2 ] [ inline-block ] [ rounded-md ] [ inline-flex ] [ space-x-1 ]" @onclick="() => DisplayDimensions()">
    <svg xmlns="http://www.w3.org/2000/svg" class="[ icon icon-tabler icon-tabler-dimensions ] [ text-white ]" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M3 5h11"></path>
        <path d="M12 7l2 -2l-2 -2"></path>
        <path d="M5 3l-2 2l2 2"></path>
        <path d="M19 10v11"></path>
        <path d="M17 19l2 2l2 -2"></path>
        <path d="M21 12l-2 -2l-2 2"></path>
        <rect x="3" y="10" width="11" height="11" rx="2"></rect>
    </svg>
    <span class="[ text-white ]">Get Dimensions</span>
</button>

<p>Window Width: @windowDimensions.Width px</p>
<p>Window Height: @windowDimensions.Height px</p>

@code {
    private WindowDimensions windowDimensions = new();

    private IJSObjectReference? module;
    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./jsinterop.js");
        }
    }

    private async Task DisplayDimensions()
    {
        if (module is not null)
        {
            windowDimensions = await module.InvokeAsync<WindowDimensions>("getViewportDimensions");
            Console.WriteLine(windowDimensions.Height);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }

    public class WindowDimensions
    {
        public int Width { get; set; }        
        public int Height { get; set; }
    }
}