# onInteraction Sends the page's interactions to `sink`, measured from the input to the next paint, so an app can hold them to a budget. It reads the browser's Event Timing (a `PerformanceObserver` of `event` entries, grouped by `interactionId`), and reports an interaction once it ends: at its `click` or `keyup`, or, for one with neither, when the next one starts. An interaction is named by its longest event's type unless `measureInteraction` labelled it. In a browser without Event Timing, only labelled interactions are reported. Returns the function that stops sending to `sink`. ```tsx import { onInteraction } from "@/lib/ouro/measure-interaction"; ``` ## Example ```tsx const stop = onInteraction(({ name, durationMs }) => { if (durationMs > 100) analytics.track("slow interaction", { name, durationMs }); }); ``` ## Usage It costs nothing at idle: no timer and no listener, only the observer, which it starts with the first sink and disconnects after the last one stops. Event Timing reports an event that took 16 ms or longer, so a quicker unlabelled interaction is not reported. ## Use instead when - Use `measureInteraction` instead when you want a name for one interaction, or a measurement in a browser without Event Timing. ## Parameters | Parameter | Type | | --- | --- | | `sink` | `InteractionSink` | ## Returns `() => void`