Component

EventRelay

It turns three unrelated browser events into a delivery route. Focusing the relay, scrolling once and pressing Space moves the actual content through three stations; any event out of order sends it back to the first station.

Possible use

It could make a reviewer focus, scroll and confirm before delivering a handoff field, or let a presenter rehearse three different browser gestures before releasing an agenda label.

Reasonable alternative

A reasonable local alternative is one button with an explicit handler. Making three unrelated events act as a relay protocol creates a failure mode where a normal interaction would be clearer.

01 / Preview

Try it yourself.

1Focus

One parcel

2Wheel

3Space

Focus this panel, then scroll once and press Space.One browser event per station. No substitutions accepted.

Mechanism

1: Tab to focus the relay panel.
2: Scroll once while it is focused, then press Space.
3: The parcel only reaches delivery when all three events arrive in order.

02 / Usage

Put it somewhere.

example.tsxTSX

import { EventRelay } from "gra-ui";
import "gra-ui/styles.css";

export function DeliveredNotice() {
  return <EventRelay><span>One parcel</span></EventRelay>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content moved through the focus, wheel and Space stations.