DOMEvent

Used for tracking DOM events. Wraps a child component and fires the specified event handler.


import { createTracker } from "@offlegacy/event-tracker";
 
const [Track] = createTracker({
  DOMEvents: {
    onFocus: (params, context) => {
      // Handle focus event
    },
  },
});
 
function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.DOMEvent type="onFocus" params={{...}}>
        <input />
      </Track.DOMEvent>
    </Track.Provider>
  );
}

Props

type: DOMEventNames - Event name (e.g., onClick, onFocus)
With schema
- params: SchemaParams | (context: Context) => SchemaParams - Parameters based on schema
- schema: string - A name of schema that will be used to validate the event parameters
Without schema
- params: EventParams | (context: Context) => EventParams - Event parameters
enabled?: boolean | ((context: Context, params: EventParams) => boolean) - Conditionally enable/disable event tracking (default: true)
debounce?: DebounceConfig - Debounce configuration to prevent rapid successive events
throttle?: ThrottleConfig - Throttle configuration to limit event frequency

Note: debounce and throttle are mutually exclusive and cannot be used together.

Tracking Options Examples

Conditional Tracking


<Track.DOMEvent type="onFocus" params={{ inputId: "email" }} enabled={(context) => context.trackingEnabled}>
  <input type="email" />
</Track.DOMEvent>

Debounced Tracking


<Track.DOMEvent
  type="onChange"
  params={{ inputId: "search" }}
  debounce={{ delay: 500, leading: false, trailing: true }}
>
  <input type="search" />
</Track.DOMEvent>

Throttled Tracking


<Track.DOMEvent
  type="onScroll"
  params={{ elementId: "main-content" }}
  throttle={{ delay: 100, leading: true, trailing: false }}
>
  <div>Scrollable content</div>
</Track.DOMEvent>

Handling Renamed Event Props

The eventName prop allows you to specify a custom event handler name.
It allows you to dynamically specify the new event handler name, ensuring flexibility even when the handler names change.


function MyInput({ onInputFocus }: { onInputFocus?: () => void }) {
  return <input onFocus={onInputFocus} />;
}
 
function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.DOMEvent type="onFocus" params={{...}} eventName="onInputFocus">
        <MyInput />
      </Track.DOMEvent>
    </Track.Provider>
  );
}