I have a custom component and when it's rendered in the browser, I need to measure its size (in JavaScript) and call back to Blazor.
How do I register JavaScript to invoke after rendering of particular component is done?
I have a custom component and when it's rendered in the browser, I need to measure its size (in JavaScript) and call back to Blazor.
How do I register JavaScript to invoke after rendering of particular component is done?
@inject IJSRuntime JSRuntime
@ref
to the element you wish to measure <div @ref=MeasureMe>
@code
declare a field ElementReference MeasureMe
var whatever = JSRuntime.InvokeAsync<YourResultType>("yourJSFunctionName", MeasureMe)
Note: If you have server side prerendering enabled, do not use JSRuntime for the first time until after OnAfterRenderAsync
has been executed with firstRender == true
.
Also note: Components do not re-render when the browser is resized.
I have a section on JSInterop on Blazor University.