A comprehensive wrapper around the Intersection Observer API, giving you all the goodness of observing intersections in a performant way.
This is a wrapper around the Intersection Observer API so that you can use it in Blazor for .NET 5. It has the same API structure with convenience methods and components for a better dev experience. It works with both Blazor WebAssembly and Blazor Server.
Get Started
1. Installation
Install BlazorIntersectionObserver through NuGet.
> dotnet add package BlazorIntersectionObserver
2. Register the service
Now you'll need to add the service to the service configuration.
WebAssembly (Program.cs)
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddIntersectionObserver();
}
}
OR
Server (Startup.cs)
public class Startup {
public void ConfigureServices(IServiceCollection services)
{
services.AddIntersectionObserver();
}
}
3. Use it!
For the quickest setup, use the IntersectionObserve component. This provides an implicit context
object which contains the observer entry! Easy!
Component setup
@using Ljbc1994.Blazor.IntersectionObserver
<IntersectionObserve>
<div @ref="context.Ref.Current">
Hey... I'm @(context.IsIntersecting ? "in view": "out of view")
</div>
</IntersectionObserve>
OR
Service setup
To directly use the service, you just need to inject it and observe the element(s).
You can pass through options to the ObserverService methods, these are the same as the Intersection Observer API options.
Example
var options = new IntersectionObserverOptions {
Root = BodyRef,
Threshold = new List<double> { 0.25, 0.5, 1 },
RootMargin = "10px 10px 10px 10px"
};
Service Methods
Observe
This a shorthand way of observing an element by providing:
The element you want to observe.
The callback to trigger on an intersection update.
The intersection observer options.
This returns an IntersectionObserver instance, allowing you to disconnect the observer or unobserve an element. Or if you wish, observe additional elements.
The Create method follows the same approach as the Intersection Observer API, you create the observer and then pass elements you wish to observe by calling the Observe method on the observer instance. To create the observer, provide the following:
The callback to trigger on an intersection update.
The intersection observer options.
This returns an IntersectionObserver instance, allowing you to Observe elements. This also provides the ability to disconnect or unobserve the element.
Rather than directly interfacing with the service, you can use this convenience component for quick and easy observing. You can access the observer entry through the implicit @context!
You need to make sure to provide the reference of the element you want to observe, this is done by passing the element reference to the context reference.
OnChange (EventCallback<IntersectionObserverEntry>) - When the intersection observer has a entry update.
IsIntersecting (bool) - Whether the element is intersecting - used for two-way binding.
Options (IntersectionObserverOptions) - The options for the observer.
Once (bool) - Only observe once for an intersection, then the instance disposes of itself.
Context
The context is the IntersectionObserverContext object, with the following signature:
public class IntersectionObserverContext
{
public IntersectionObserverEntry Entry { get; set; }
public ForwardReference Ref { get; set; } = new ForwardReference();
public bool IsIntersecting => this.Entry?.IsIntersecting ?? false;
}
public class IntersectionObserverEntry
{
public bool IsIntersecting { get; set; }
public double IntersectionRatio { get; set; }
public DOMRectReadOnly BoundingClientRect { get; set; }
public DOMRectReadOnly RootBounds { get; set; }
public bool IsVisible { get; set; }
public double Time { get; set; }
}
Feature Requests
There's so much that IntersectionObserver can do, so if you have any requests or you want better documentation and examples, feel free to make a pull request or create an issue!
