https://github.com/soenneker/soenneker.blazor.masonry

A Blazor interop library that integrates Masonry, the cascading grid layout library
https://github.com/soenneker/soenneker.blazor.masonry

blazor csharp dotnet interop masonry

Last synced: about 3 hours ago
JSON representation

A Blazor interop library that integrates Masonry, the cascading grid layout library

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.masonry
• Owner: soenneker
• License: mit
• Created: 2023-02-03T15:09:40.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T12:59:18.000Z (3 months ago)
• Last Synced: 2024-10-29T14:32:56.369Z (3 months ago)
• Topics: blazor, csharp, dotnet, interop, masonry
• Language: C#
• Homepage: https://soenneker.com
• Size: 367 KB
• Stars: 10
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![](https://img.shields.io/nuget/v/Soenneker.Blazor.Masonry.svg?style=for-the-badge)](https://www.nuget.org/packages/Soenneker.Blazor.Masonry/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.masonry/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.masonry/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/Soenneker.Blazor.Masonry.svg?style=for-the-badge)](https://www.nuget.org/packages/Soenneker.Blazor.Masonry/)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) Soenneker.Blazor.Masonry

### A Blazor interop library that integrates [Masonry](https://masonry.desandro.com/), the cascading grid layout library

## Installation

```

dotnet add package Soenneker.Blazor.Masonry

```

## Usage

1. Register the interop within DI (`Program.cs`)

```csharp

public static async Task Main(string[] args)

{

    ...

    builder.Services.AddMasonryInteropAsScoped();

}

```

2. Inject `IMasonryInterop` within your `App.Razor` file

```csharp

@using Soenneker.Blazor.Masonry.Abstract

@inject IMasonryInterop MasonryInterop

```

3. Use [Bootstrap Rows](https://getbootstrap.com/docs/5.0/examples/masonry/) and columns on the page (`
`). Other selectors can be passed into the interop, `.row` is default.


4. Initialize Masonry within your Razor code in the `OnAfterRenderAsync` override

```csharp

protected override async Task OnAfterRenderAsync(bool firstRender)

{

	if (firstRender)

		await MasonryInterop.Init();

}

```