A Blazor interop library that integrates Masonry, the cascading grid layout library
dotnet add package Soenneker.Blazor.Masonry
- Insert the interop script, and the library script in
wwwroot/index.htmlat the bottom of your<body>
<script src="_content/Soenneker.Blazor.Masonry/masonry.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>- Register the interop within DI (
Program.cs)
public static async Task Main(string[] args)
{
...
builder.Services.AddMasonry();
}- Inject
IMasonryInteropwithin yourApp.Razorfile
@using Soenneker.Blazor.Masonry.Abstract
@inject IMasonryInterop MasonryInterop-
Use Bootstrap Rows and columns on the page (
<div class='row'></div>). Other selectors can be passed into the interop,.rowis default. -
Initialize Masonry within your Razor code in the
OnAfterRenderAsyncoverride
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await MasonryInterop.Init();
}