diff --git a/Directory.Build.props b/Directory.Build.props index c8f2786..1a6c523 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -33,7 +33,7 @@ - 3.0.0 + 3.0.1 dev diff --git a/README.md b/README.md index 10361ab..dd02278 100644 --- a/README.md +++ b/README.md @@ -291,6 +291,14 @@ public class IntersectionObserverEntry } ``` +## Additional Information + +### Upgrading to `2.0.1`+ + +In versions prior to `2.0.1`, the `IntersectionObserve` component didn't require a reference to the node as it was wrapped in an element that was automatically observed. This was changed to ensure the consumer provides the reference to prevent any potential layout issues and make it explicit what element should be observed. + +Therefore, before `2.0.1`, if the consumer had an element with `display: none;` within the `IntersectionObserve` component, this would have worked. However, as we're now observing the element provided as opposed to a wrapped element, this will no longer work. To resolve this, you can wrap the observed element in a div and observe the container div instead of the observed element. + ## 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! diff --git a/src/Ljbc1994.Blazor.IntersectionObserver/IntersectionObserve.cs b/src/Ljbc1994.Blazor.IntersectionObserver/IntersectionObserve.cs index c62defe..8158eb0 100644 --- a/src/Ljbc1994.Blazor.IntersectionObserver/IntersectionObserve.cs +++ b/src/Ljbc1994.Blazor.IntersectionObserver/IntersectionObserve.cs @@ -10,6 +10,8 @@ namespace Ljbc1994.Blazor.IntersectionObserver.Components { public class IntersectionObserve : ComponentBase, IAsyncDisposable { + private const string NO_ELEMENT_MESSAGE = "The element reference to observe is required, for example: @ref=\"Context.Ref.Current\" must be provided on the element"; + [Inject] private IIntersectionObserverService ObserverService { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } @@ -40,12 +42,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender) private async Task InitialiseObserver() { - if (this.IntersectionObserverContext?.Ref?.Current == null) + var elementReference = this.IntersectionObserverContext?.Ref?.Current; + + if (elementReference == null || Equals(elementReference, default(ElementReference))) { - throw new Exception("You need to provide the element to observe, for example: @ref=\"Context.Ref.Current\""); + throw new Exception(NO_ELEMENT_MESSAGE); } - this.Observer = await this.ObserverService.Observe(this.IntersectionObserverContext.Ref.Current, this.OnIntersectUpdate, this.Options); + this.Observer = await this.ObserverService.Observe(elementReference.Value, this.OnIntersectUpdate, this.Options); } private async void OnIntersectUpdate(IList entries) @@ -80,6 +84,10 @@ public async ValueTask DisposeAsync() protected override void BuildRenderTree(RenderTreeBuilder builder) { + if (this.ChildContent == null) + { + throw new Exception($"No element found to observe. {NO_ELEMENT_MESSAGE}"); + } this.ChildContent(this.IntersectionObserverContext)(builder); } } diff --git a/src/Ljbc1994.Blazor.IntersectionObserver/Ljbc1994.Blazor.IntersectionObserver.csproj b/src/Ljbc1994.Blazor.IntersectionObserver/Ljbc1994.Blazor.IntersectionObserver.csproj index 3231dd0..94d716e 100644 --- a/src/Ljbc1994.Blazor.IntersectionObserver/Ljbc1994.Blazor.IntersectionObserver.csproj +++ b/src/Ljbc1994.Blazor.IntersectionObserver/Ljbc1994.Blazor.IntersectionObserver.csproj @@ -16,10 +16,14 @@ Blazor Intersection Observer Intersection Observer API for Blazor applications true - 3.0.0 + 3.0.1 BlazorIntersectionObserver README.md +3.0.1 +- Add helpful error messages if the consumer fails to provide an element to observe or does not provide +any child content. + 3.0.0 - *BREAKING CHANGE* Namespace has been changed to `Ljbc1994.Blazor.IntersectionObserver` to avoid namespace conflicts with Blazor libraries.