# Interceptor **Path:** Components/Advanced [Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md) --- Interceptor RbInterceptor is a service-level bridge for low-level DOM interactions that are not tied to a single visual component API. It currently focuses on two scenarios: key interception and element resize observation. Use it when you want to attach keyboard shortcuts to a specific element or watch one or more elements for size changes without building a dedicated component around that behavior. When To Use Use AttachKeyInput(...) for element-scoped shortcuts such as Enter , Ctrl+S , or arrow-key navigation. Use AttachResize(...) when layout logic depends on actual rendered width or height. Call Detach(...) during component disposal to release registrations explicitly. Resize Observer This is the smallest resize-observer flow: attach on first render, read Rect.Width / Rect.Height , and detach on dispose. Show code Resize this box Width: 0 px, Height: 0 px Observe Multiple Elements The multi-element overload groups observed elements under the same callback, which is useful for dashboards, comparison layouts, and synchronized measurements. Show code Left panel Right panel Left: - Right: - Key Input Build options with CreateKeyOptions() , register keys with AddKey(...) , and optionally scope handlers with AddControl(...) and UseArrowKeysAsTab() . Show code Try Enter , Ctrl+S , or move with arrow keys between the two inputs. Last event: Waiting for input... Lifecycle RbInterceptor is a shared service, so registration lifetime belongs to the consuming component. Attach in OnAfterRenderAsync(firstRender) and detach in Dispose() or DisposeAsyncCore() . API RbInterceptor.CreateKeyOptions() Creates a fluent keyboard options object used by AttachKeyInput(...) . Return RbInterceptorKeyOptions Returns a mutable options builder for key subscriptions, control modifiers, and arrow-key tab behavior. RbInterceptor.AttachKeyInput(string ElementId, RbInterceptorKeyOptions Options, KeyHandlerDelegate Handler) Subscribes a specific DOM element to keyboard events routed back into Blazor. Parameters string ElementId Target DOM element id. RbInterceptorKeyOptions Options Key map and behavior definition created with CreateKeyOptions() . Task(string ElementId, KeyboardEventArgs args) Handler Callback invoked for matching keys. Return Task Completes after registration is dispatched to JavaScript. RbInterceptor.AttachResize(string ElementId, RbResizeDelegate Handler) Observes a single element for width and height changes. Parameters string ElementId Target DOM element id. Task(IEnumerable args) Handler Callback that receives one or more resize entries. Return Task Completes after initial observation registration and the first size payload. RbInterceptor.AttachResize(IEnumerable ElementIds, RbResizeDelegate Handler) Observes multiple elements and groups matching resize entries into one callback invocation. Parameters IEnumerable ElementIds Collection of target DOM ids. Task(IEnumerable args) Handler Shared callback for all registered elements. Return Task Completes after registration and initial size collection. RbInterceptor.Detach(string ElementId) / Detach(IEnumerable ElementIds) Removes key and resize registrations for one or more elements. Parameters string / IEnumerable ElementId / ElementIds The element id or ids to detach. Return Task Completes when in-memory registrations are removed. RbInterceptorKeyOptions.AddKey(string Key) Adds a tracked key entry such as Enter , S , or Escape . Parameters string Key Key name matched against browser keyboard events. Return RbInterceptorKeyOption Returns the per-key fluent builder for event phase and modifier configuration. RbInterceptorKeyOptions.UseArrowKeysAsTab() Treats arrow keys as focus navigation between sibling elements. Return RbInterceptorKeyOptions Returns the same options builder for chaining. RbInterceptorKeyOption.KeyDown(...) / KeyUp(...) / KeyPress(...) Enables subscription for the selected browser keyboard phase and optionally controls prevent-default and stop-propagation behavior. Parameters bool PreventDefault = true Prevents the browser default behavior for the matching key event. bool StopPropagation = true Stops event bubbling for the matching key event. Return RbInterceptorKeyOption Returns the same key option builder for chaining. RbInterceptorKeyOption.AddControl(bool Ctrl = false, bool Shift = false, bool Alt = false, bool Meta = false) Restricts the key registration to a modifier combination such as Ctrl+S or Ctrl+Shift+Enter . Return RbInterceptorKeyOption Returns the same key option builder for chaining. ✕ Contents