BlazorPro.BlazorSize 3.1.0

There is a newer version of this package available.
See the version list below for details.
Install-Package BlazorPro.BlazorSize -Version 3.1.0
dotnet add package BlazorPro.BlazorSize --version 3.1.0
<PackageReference Include="BlazorPro.BlazorSize" Version="3.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorPro.BlazorSize --version 3.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorPro.BlazorSize, 3.1.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorPro.BlazorSize as a Cake Addin
#addin nuget:?package=BlazorPro.BlazorSize&version=3.1.0

// Install BlazorPro.BlazorSize as a Cake Tool
#tool nuget:?package=BlazorPro.BlazorSize&version=3.1.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 Browser's current size, change in size, and test media queries.

BlazorSize was designed to allow Razor Components to implement adaptive rendering. Handle mobile/desktop rendering changes at runtime with ease and complement your apps CSS media queries with programmatic work flows.

Add the NuGet package

Package Manager

Install-Package BlazorPro.BlazorSize 


dotnet add package BlazorPro.BlazorSize 


<PackageReference Include="BlazorPro.BlazorSize" Version="3.*" />

Import the namespace

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

@using BlazorPro.BlazorSize

Add the MediaQueryList

Add a MediaQueryList to your application's main layout or root. The MediaQueryList is responsible for communicating with all MediaQuery components in your app. The MediaQueryList component will consolidate redundant media queries and manage resources so that unused event listeners are disposed of properly.

    <div class="sidebar">
        <NavMenu />

    <div class="main">
        <div class="top-row px-4">
            <a href="" target="_blank" class="ml-md-auto">About</a>

        <div class="content px-4">

Add a MediaQuery and bind

Using the @bind-Matches directive we can easily bind to a browser's media query and respond to it.

@if (IsSmall)
    <WeatherCards Data="forecasts"></WeatherCards>
    <WeatherGrid Data="forecasts"></WeatherGrid>

@if (IsMedium)

<MediaQuery Media="@Breakpoints.OnlyMedium" @bind-Matches="IsMedium" />
<MediaQuery Media="@Breakpoints.SmallDown" @bind-Matches="IsSmall" />

@code {
    WeatherForecast[] forecasts;

    bool IsMedium = false;
    bool IsSmall = false;

    protected override async Task OnInitializedAsync()
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");

No-Code Templates

The MediaQuery component can also use templates instead of the @bind directive. Templates are useful for swapping out UI bits when the screen size changes.

<MediaQuery Media="@Breakpoints.SmallDown">
        <WeatherCards Data="forecasts"></WeatherCards>
        <WeatherGrid Data="forecasts"></WeatherGrid>


Common media queries are already included as helpers to keep you out of the Bootstrap docs. Stay in your code longer and write cleaner statements too!

/// @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)
IsMediumUpMedia = await listener.MatchMedia(Breakpoints.MediumUp);

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

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

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

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

/// Medium devices (tablets, less than 992px)
/// @media(max-width: 991.98px) { ... }
IsMediumDown = = await listener.MatchMedia(Breakpoints.MediumDown);

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

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

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

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

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

string BetweenMediumAndLargeOnly => Breakpoints.Between(Breakpoints.MediumUp, Breakpoints.LargeDown);
// out: "(min-width: 768px) and (max-width: 1199.98px)"

IsBetweenMediumAndLargeOnly = await listener.MatchMedia(BetweenMediumAndLargeOnly);

NuGet packages (4)

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

Package Downloads

A collection of Blazor components


A Blazor navbar component based off TailWindCss. It has the bare minimum styles to function with the option to add your own classes. It's built so it can be fully customizable and reusable.


A replacement service only for use with Telerik REPL for Blazor and BlazorSize. This is for demos only and should not be used outside of Telerik REPL for Blazor.


A testing library to provide helper extensions for BlazorSize.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on BlazorPro.BlazorSize:

Repository Stars
A collection of examples related to Telerik UI for Blazor Components:
Version Downloads Last updated
6.1.0 176 12/1/2021
6.0.0 1,475 11/10/2021
6.0.0-pre2 355 10/5/2021
6.0.0-pre 148 8/23/2021
5.0.0 14,521 5/27/2021
5.0.0-pre 177 5/25/2021
3.2.1 11,773 3/9/2021
3.2.0 856 3/5/2021
3.1.0 41,120 11/30/2020
3.0.0 950 11/23/2020
2.3.0 27,456 8/11/2020
2.0.2 11,160 4/21/2020
1.2.2 7,287 1/26/2020
1.2.1 307 1/23/2020
1.2.0 380 1/22/2020

     Added .NET 5 module loading for BlazorSize Resize Listener.
     Fixed casing on JS modules, fixes deployment issues on Linux.
     Added .NET 5 module loading for BlazorSize Media Queries.
     Fixed additional regressions from 2.2.0, update recommended.
     Fixed possible regressions, update recommended.
     Updated Blazor dependencies.
     Fixed MSBuild including *.json files breaking NuGet pkg.
     Added MediaQueryList & MediaQuery components.
     Fixes initalization issues with Client-Side Blazor