BlazorPro.BlazorSize 1.2.0

A JavaScript interop for Blazor used to detect the browser's screen size and perform Media Query tests. BlazorSize uses the DOM API `matchMedia` to test screen size. BlazorSize was created to allow Blazor components to render adaptively.

There is a newer version of this package available.
See the version list below for details.
Install-Package BlazorPro.BlazorSize -Version 1.2.0
dotnet add package BlazorPro.BlazorSize --version 1.2.0
<PackageReference Include="BlazorPro.BlazorSize" Version="1.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorPro.BlazorSize --version 1.2.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorPro.BlazorSize, 1.2.0"
For F# scripts that support #r syntax, copy this into the source code to reference the package.
// Install BlazorPro.BlazorSize as a Cake Addin
#addin nuget:?package=BlazorPro.BlazorSize&version=1.2.0

// Install BlazorPro.BlazorSize as a Cake Tool
#tool nuget:?package=BlazorPro.BlazorSize&version=1.2.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorSize is a JavaScript interop library for Blazor that is used to detect the Broswer's current size, change in size, and test media queries.

BlazorSize was designed to allow Razor Components to implment adaptive rendering. Be sure to exhaust media queries as an option before using BlazorSize as your method of handling mobile/desktop rendering changes.

Usage:

...
<script src="_content/BlazorSize/blazorSize.js"></script>
public void ConfigureServices(IServiceCollection services)
{
	...
    services.AddScoped<ResizeListener>();
}

Reference the JavaScript interop

Add the JavaScript interop to your application's index.html or _hosts.cshtml

    <!-- <script src="_content/BlazorPro.BlazorSize/blazorSize.js"></script> -->
    <script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>

Configure DI

In startup.cs register ResizeListener with the applications service collection.

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

Import the namespace

Add a reference to the namespace in your _Imports.razor or at the top of a page.

@using BlazorPro.BlazorSize

Usage

This example shows how to get the browsers width/height and check for media query matches. Depending on the matched media query the view can toggle between two components WeatherGrid or WeatherCards.

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

@using BlazorSize.Example.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates adaptive rendering of a Blazor UI.</p>

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

@if (IsSmallMedia)
{
	<!-- Display a full data grid on larger devices -->
    <WeatherGrid Data="forecasts"></WeatherGrid>
}
else
{
	<!-- Display a card layout on small devices -->
    <WeatherCards Data="forecasts"></WeatherCards>
}

@code {
    WeatherForecast[] forecasts;

	// We can also capture the browser's width / height if needed. We hold the value here.
    BrowserWindowSize browser = new BrowserWindowSize();

    bool IsSmallMedia = false;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    protected override void OnAfterRender(bool firstRender)
    {

        if (firstRender)
        {
			// Subscribe to the OnResized event. This will do work when the browser is resized.
            listener.OnResized += WindowResized;
        }
    }

    void IDisposable.Dispose()
    {
		// Always use IDisposable in your component to unsubscribe from the event.
		// Be a good citizen and leave things how you found them. 
		// This way event handlers aren't called when nobody is listening.
        listener.OnResized -= WindowResized;
    }

	// This method will be called when the window resizes.
	// It is ONLY called when the user stops dragging the window's edge. (It is already throttled to protect your app from perf. nightmares)
    async void WindowResized(object _, BrowserWindowSize window)
    {
		// Get the browsers's width / height
        browser = window;

		// Check a media query to see if it was matched. We can do this at any time, but it's best to check on each resize
        IsSmallMedia = await listener.MatchMedia("(min-width: 768px)");

		// We're outside of the component's lifecycle, be sure to let it know it has to re-render.
        StateHasChanged();
    }

}

Helpers


The Breakpoints class defines common media query strings.

/// @media(min-width: 576px) { ... }
/// Small devices (landscape phones, 576px and up)
IsSmallUpMedia = await listener.MatchMedia(Breakpoints.SmallUp);

/// @media(min-width: 768px) { ... }
/// Medium devices (tablets, 768px and up)
Breakpoints.MediumUp
IsMediumUpMedia = await listener.MatchMedia(Breakpoints.MediumUp);

// Large devices (desktops, 992px and up)
/// @media(min-width: 992px) { ... }
Breakpoints.LargeUp
IsLargeUpMedia = await listener.MatchMedia(Breakpoints.LargeUp);

/// Extra large devices (large desktops, 1200px and up)
/// @media(min-width: 1200px) { ... }
Breakpoints.XLargeUp
IsXLargeUpMedia = await listener.MatchMedia(Breakpoints.XLargeUp);

/// Extra small devices (portrait phones, less than 576px)
/// @media(max-width: 575.98px) { ... }
Breakpoints.XSmallDown

/// Small devices (landscape phones, less than 768px)
/// @media(max-width: 767.98px) { ... }
Breakpoints.SmallDown

/// Medium devices (tablets, less than 992px)
/// @media(max-width: 991.98px) { ... }
Breakpoints.MediumDown

/// Large devices (desktops, less than 1200px)
/// @media(max-width: 1199.98px) { ... }
Breakpoints.LargeDown

/// Small devices (landscape phones, 576px and up)
/// @media(min-width: 576px) and(max-width: 767.98px) { ... }
Breakpoints.OnlySmall

/// Medium devices (tablets, 768px and up)
/// @media(min-width: 768px) and(max-width: 991.98px) { ... }
Breakpoints.OnlyMedium

/// Large devices (desktops, 992px and up)
/// @media(min-width: 992px) and(max-width: 1199.98px) { ... }
Breakpoints.OnlyLarge

/// <summary>
/// Combines two media queries with the `and` keyword.
/// Values must include parenthesis.
/// Ex: (min-width: 992px) and (max-width: 1199.98px)
Between(string min, string max)

Example:
string BetweenMediumAndLargeOnly => Between(Breakpoints.MediumUp, LargeDown);

// out: "(min-width: 768px) and (max-width: 1199.98px)"

BlazorSize is a JavaScript interop library for Blazor that is used to detect the Broswer's current size, change in size, and test media queries.

BlazorSize was designed to allow Razor Components to implment adaptive rendering. Be sure to exhaust media queries as an option before using BlazorSize as your method of handling mobile/desktop rendering changes.

Usage:

...
<script src="_content/BlazorSize/blazorSize.js"></script>
public void ConfigureServices(IServiceCollection services)
{
	...
    services.AddScoped<ResizeListener>();
}

Reference the JavaScript interop

Add the JavaScript interop to your application's index.html or _hosts.cshtml

    <!-- <script src="_content/BlazorPro.BlazorSize/blazorSize.js"></script> -->
    <script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>

Configure DI

In startup.cs register ResizeListener with the applications service collection.

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

Import the namespace

Add a reference to the namespace in your _Imports.razor or at the top of a page.

@using BlazorPro.BlazorSize

Usage

This example shows how to get the browsers width/height and check for media query matches. Depending on the matched media query the view can toggle between two components WeatherGrid or WeatherCards.

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

@using BlazorSize.Example.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates adaptive rendering of a Blazor UI.</p>

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

@if (IsSmallMedia)
{
	<!-- Display a full data grid on larger devices -->
    <WeatherGrid Data="forecasts"></WeatherGrid>
}
else
{
	<!-- Display a card layout on small devices -->
    <WeatherCards Data="forecasts"></WeatherCards>
}

@code {
    WeatherForecast[] forecasts;

	// We can also capture the browser's width / height if needed. We hold the value here.
    BrowserWindowSize browser = new BrowserWindowSize();

    bool IsSmallMedia = false;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    protected override void OnAfterRender(bool firstRender)
    {

        if (firstRender)
        {
			// Subscribe to the OnResized event. This will do work when the browser is resized.
            listener.OnResized += WindowResized;
        }
    }

    void IDisposable.Dispose()
    {
		// Always use IDisposable in your component to unsubscribe from the event.
		// Be a good citizen and leave things how you found them. 
		// This way event handlers aren't called when nobody is listening.
        listener.OnResized -= WindowResized;
    }

	// This method will be called when the window resizes.
	// It is ONLY called when the user stops dragging the window's edge. (It is already throttled to protect your app from perf. nightmares)
    async void WindowResized(object _, BrowserWindowSize window)
    {
		// Get the browsers's width / height
        browser = window;

		// Check a media query to see if it was matched. We can do this at any time, but it's best to check on each resize
        IsSmallMedia = await listener.MatchMedia("(min-width: 768px)");

		// We're outside of the component's lifecycle, be sure to let it know it has to re-render.
        StateHasChanged();
    }

}

Helpers


The Breakpoints class defines common media query strings.

/// @media(min-width: 576px) { ... }
/// Small devices (landscape phones, 576px and up)
IsSmallUpMedia = await listener.MatchMedia(Breakpoints.SmallUp);

/// @media(min-width: 768px) { ... }
/// Medium devices (tablets, 768px and up)
Breakpoints.MediumUp
IsMediumUpMedia = await listener.MatchMedia(Breakpoints.MediumUp);

// Large devices (desktops, 992px and up)
/// @media(min-width: 992px) { ... }
Breakpoints.LargeUp
IsLargeUpMedia = await listener.MatchMedia(Breakpoints.LargeUp);

/// Extra large devices (large desktops, 1200px and up)
/// @media(min-width: 1200px) { ... }
Breakpoints.XLargeUp
IsXLargeUpMedia = await listener.MatchMedia(Breakpoints.XLargeUp);

/// Extra small devices (portrait phones, less than 576px)
/// @media(max-width: 575.98px) { ... }
Breakpoints.XSmallDown

/// Small devices (landscape phones, less than 768px)
/// @media(max-width: 767.98px) { ... }
Breakpoints.SmallDown

/// Medium devices (tablets, less than 992px)
/// @media(max-width: 991.98px) { ... }
Breakpoints.MediumDown

/// Large devices (desktops, less than 1200px)
/// @media(max-width: 1199.98px) { ... }
Breakpoints.LargeDown

/// Small devices (landscape phones, 576px and up)
/// @media(min-width: 576px) and(max-width: 767.98px) { ... }
Breakpoints.OnlySmall

/// Medium devices (tablets, 768px and up)
/// @media(min-width: 768px) and(max-width: 991.98px) { ... }
Breakpoints.OnlyMedium

/// Large devices (desktops, 992px and up)
/// @media(min-width: 992px) and(max-width: 1199.98px) { ... }
Breakpoints.OnlyLarge

/// <summary>
/// Combines two media queries with the `and` keyword.
/// Values must include parenthesis.
/// Ex: (min-width: 992px) and (max-width: 1199.98px)
Between(string min, string max)

Example:
string BetweenMediumAndLargeOnly => Between(Breakpoints.MediumUp, LargeDown);

// out: "(min-width: 768px) and (max-width: 1199.98px)"

Release Notes

Full-release

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BlazorPro.BlazorSize:

Package Downloads
Blazm.Components
A collection of Blazor components

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
3.2.1 1,977 3/9/2021
3.2.0 404 3/5/2021
3.1.0 13,459 11/30/2020
3.0.0 865 11/23/2020
2.3.0 15,445 8/11/2020
2.0.2 8,911 4/21/2020
1.2.2 5,830 1/26/2020
1.2.1 234 1/23/2020
1.2.0 306 1/22/2020
Show less