https://github.com/erinnmclaughlin/tizzani.blazorhelpers.browserwindow
Some helper methods for getting resize and scroll events from the browser.
https://github.com/erinnmclaughlin/tizzani.blazorhelpers.browserwindow
blazor
Last synced: 2 months ago
JSON representation
Some helper methods for getting resize and scroll events from the browser.
- Host: GitHub
- URL: https://github.com/erinnmclaughlin/tizzani.blazorhelpers.browserwindow
- Owner: erinnmclaughlin
- License: mit
- Created: 2022-09-17T15:30:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-18T18:48:18.000Z (almost 4 years ago)
- Last Synced: 2026-04-03T03:36:53.614Z (3 months ago)
- Topics: blazor
- Language: C#
- Homepage: https://www.nuget.org/packages/Tizzani.BlazorHelpers.BrowserWindow/1.0.0
- Size: 225 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tizzani.BlazorHelpers.BrowserWindow
Some helper methods for getting resize and scroll events from the browser. Currently compatible with **Blazor WebAssembly** only.
[](https://www.nuget.org/packages/Tizzani.BlazorHelpers.BrowserWindow/1.0.0)
## Setup
### Register Services
```csharp
builder.Services.AddBrowserWindowService();
```
### Add Usings
##### \_Imports.razor
```csharp
@using Tizzani.BlazorHelpers.BrowserWindow
```
## Example Usage
### Option 1: Use EventCallbacks
```html
@using Tizzani.BlazorHelpers.BrowserWindow.Models
@if (Dimensions == null || PageOffset == null)
{
Loading browser window info...
}
else
{
- Page Offset
- @PageOffset.X, @PageOffset.Y
- Inner Height
- @(Dimensions.InnerHeight)px
- Inner Width
- @(Dimensions.InnerWidth)px
- Outer Height
- @(Dimensions.OuterHeight)px
- Outer Width
- @(Dimensions.OuterWidth)px
}
@code {
private WindowDimensions? Dimensions { get; set; }
private PageOffset? PageOffset { get; set; }
private void UpdateDimensions(WindowDimensions dimensions)
{
Dimensions = dimensions;
}
private void UpdatePageOffset(PageOffset pageOffset)
{
PageOffset = pageOffset;
}
}
```
### Option 2: Use Component Context
```html
- Page Offset
- @offset.X, @offset.Y
- Inner Height
- @(dimensions.InnerHeight)px
- Inner Width
- @(dimensions.InnerWidth)px
- Outer Height
- @(dimensions.OuterHeight)px
- Outer Width
- @(dimensions.OuterWidth)px
```
### Option 3: Use Cascading Values
##### App.razor
```html
Not found
Sorry, there's nothing at this address.
```
##### BrowserInfo.razor
```html
@using Tizzani.BlazorHelpers.BrowserWindow.Models
@if (Dimensions == null || PageOffset == null)
{
Loading browser window info...
}
else
{
- Page Offset
- @PageOffset.X, @PageOffset.Y
- Inner Height
- @(Dimensions.InnerHeight)px
- Inner Width
- @(Dimensions.InnerWidth)px
- Outer Height
- @(Dimensions.OuterHeight)px
- Outer Width
- @(Dimensions.OuterWidth)px
}
@code {
[CascadingValue] private WindowDimensions? Dimensions { get; set; }
[CascadingValue] private PageOffset? PageOffset { get; set; }
}
```