Home

Welcome to the BlazorSize wiki!

Organize later

Reference the JavaScript interop

@*<script src="_content/BlazorSize/blazorSize.js"></script>*@
<script src="_content/BlazorSize/blazorSize.min.js"></script>

Inject the service

services.AddScoped<ResizeListener>();
//services.AddResizeListener(options =>
//                            {
//                                options.ReportRate = 300;
//                                options.EnableLogging = true;
//                                options.SuppressInitEvent = true;
//                            });

Import the namespace

@using BlazorPro.BlazorSize

Pub / Sub

@implements IDisposable
@inject ResizeListener listener
@page "/"

<h3>Height: @browser.Height</h3>
<h3>Width: @browser.Width</h3>
<h3>MQ: @IsSmallMedia</h3>

@code {

    BrowserWindowSize browser = new BrowserWindowSize();

    bool IsSmallMedia = false;


    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            listener.OnResized += WindowResizedA;
        }
    }

    void IDisposable.Dispose()
    {
        listener.OnResized -= WindowResizedA;
    }

    async void WindowResizedA(object _, BrowserWindowSize window)
    {
        browser = window;
        IsSmallMedia = await listener.MatchMedia(Breakpoints.XLargeUp);
        StateHasChanged();
    }
}