Click

A specialized version of DOMEvent for click events (type="onClick").


import { createTracker } from "@offlegacy/event-tracker";
 
const [Track] = createTracker({
  DOMEvents: {
    onClick: (params, context) => {
      // Handle click event
    },
  },
});
 
function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.Click params={{ buttonId: "submit" }}>
        <button>Submit</button>
      </Track.Click>
    </Track.Provider>
  );
}

Props

With schema
- params: SchemaParams | (context: Context) => SchemaParams - Click event 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 - Click 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.Click params={{ buttonId: "premium-feature" }} enabled={(context, params) => context.user?.isPremium}>
  <button>Premium Feature</button>
</Track.Click>

Debounced Tracking


<Track.Click params={{ buttonId: "search" }} debounce={{ delay: 300, leading: false, trailing: true }}>
  <button>Search</button>
</Track.Click>

Throttled Tracking


<Track.Click params={{ buttonId: "rapid-action" }} throttle={{ delay: 1000, leading: true, trailing: false }}>
  <button>Quick Action</button>
</Track.Click>

Handling Renamed Click Event Prop

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


function MyButton({ onButtonClick }: { onButtonClick?: () => void }) {
  return <button onClick={onButtonClick} />;
}
 
function App() {
  return (
    <Track.Provider initialContext={{}}>
      <Track.Click type="onFocus" params={{...}} eventName="onButtonClick">
        <MyButton />
      </Track.Click>
    </Track.Provider>
  );
}