# Adding Custom Event Handlers to Module React Components **URL:** \ **Category:** Module Development\ **Created:** [November 1, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048 "2024-11-01T15:37:52Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 1, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/1 "2024-11-01T15:37:52Z")
Hi, as the title says, I'm looking to figure out how to add custom event handlers to a react component. I've been looking at the ApexCharts repo for reference, but I'm not really seeing how it works. Does anyone have any fundamental pointers for implementing this? ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 1, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/2 "2024-11-01T15:55:35Z")
Loose explanation with links to ApexCharts module code: 1. In your client code, you need to [create](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/web/packages/client/typescript/components/ApexChart.tsx#L42) and [register](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/web/packages/client/typescript/components/ApexChart.tsx#L686) a `ComponentStoreDelegate`. 2. This `ComponentStoreDelegate` lets you [fire events](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/web/packages/client/typescript/components/ApexChart.tsx#L71) that will be [received](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/gateway/src/main/java/com/kyvislabs/apexcharts/gateway/ApexChartModelDelegate.java#L187) on your `ComponentModelDelegate` [running on the gateway](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/gateway/src/main/java/com/kyvislabs/apexcharts/gateway/GatewayHook.java#L45). 3. You can also send events the other direction too; you can [fire events](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/gateway/src/main/java/com/kyvislabs/apexcharts/gateway/ApexChartModelDelegate.java#L182) from your gateway `ComponentModelDelegate` that are [handled by the client.](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/web/packages/client/typescript/components/ApexChart.tsx#L57) ---
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 1, 2024, 3:57pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/3 "2024-11-01T15:57:37Z")
Ahh okay was hoping to avoid that. Thanks, I'll do my best. ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 1, 2024, 4:26pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/4 "2024-11-01T16:26:27Z")
It's not that bad 🤷‍♂️ ---
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 1, 2024, 4:47pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/5 "2024-11-01T16:47:56Z")
Got it, so I think the handleEvent function is what I'm particularly interested in, here's a sample one from the perspective-component project: ```python handleEvent(eventName: string, eventObject: JsObject): void { logger.info(() => `Received '${eventName}' event!`); const { MESSAGE_RESPONSE_EVENT } = MessageEvents; switch (eventName) { case MESSAGE_RESPONSE_EVENT: this.handleComponentResponseEvent(eventObject); break; default: logger.warn(() => `No delegate event handler found for event: ${eventName} in MessageComponentGatewayDelegate`); } } ``` Do you happen to know what eventName and eventObject look like typically? Is there any documentation anywhere on this? ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 1, 2024, 4:51pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/6 "2024-11-01T16:51:49Z")
It’ll be whatever you pass in when you fire the event from your `ComponentModelDelegate`: > **[ComponentModelDelegate](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.38-rc1/com/inductiveautomation/perspective/gateway/api/ComponentModelDelegate.html#fireEvent(java.lang.String,com.inductiveautomation.ignition.common.gson.JsonObject))** > > declaration: package: com.inductiveautomation.perspective.gateway.api, class: ComponentModelDelegate ---
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 4, 2024, 5:02pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/7 "2024-11-04T17:02:37Z")
Hey so I've done more tinkering and wonder if you knew the answer to this. So I'm looking in this file: > For my own component I'm working on implementing a click handler when certain parts of the component are clicked. I'm looking at the ApexChartGatewayDelegate class and didn't see click handlers included in any of the cases. However I do then see it in the "prepareOptions", and it is also defined as a function in the ApexCharts class itself. I'm also not sure how to implement these bind functions since I'm doing a functional component as opposed to a class component, and therefore can't extend the "Component" class (I think). Do you have any thoughts or pointers at this point? Sorry if my questions are too ambiguous, I can provide any additional information needed. And just to reiterate, my goal is to be able to provide custom event handling for a custom component, like how apexcharts has it here: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6f7699be23775c32e2483d3f318ebba38a7e3bb.png) ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 4, 2024, 5:26pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/8 "2024-11-04T17:26:31Z")
> [@Jason\_Zhou](#): > > bind functions Don't worry about this. > [@Jason\_Zhou](#): > > provide custom event handling for a custom component 1. In your `ComponentDescriptor`, [set the events](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/common/src/main/java/com/kyvislabs/apexcharts/common/component/display/ApexChart.java#L59) that you would like to trigger. This is also what makes the events appear in the designer. There are some [other threads](https://forum.inductiveautomation.com/t/creating-a-component-event/30403/16) on the forum about what should be in the event's `*.props.json` file. 2. In your client component, [fire the events](https://github.com/Kyvis-Labs/ignition-apexcharts-module/blob/acf1ff23815d28bcf4db598f19d82cdbb67534f6/web/packages/client/typescript/components/ApexChart.tsx#L528) using `props.componentEvents.fireComponentEvent(eventName, eventObject)`. The corresponding event will be triggered on the gateway when it's received. ---
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 4, 2024, 5:30pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/9 "2024-11-04T17:30:57Z")
How did I not find that thread... thank you so much. So just for my understanding, do all component events, including the default/non-custom ones, also trigger on the gateway? ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 4, 2024, 5:35pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/10 "2024-11-04T17:35:59Z")
Yup, all component events run on the gateway. ---
**Author:** ![Jason\_Zhou](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@Jason\_Zhou](https://forum.inductiveautomation.com/u/Jason_Zhou)\ **Post date:** [November 4, 2024, 5:48pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/11 "2024-11-04T17:48:39Z")
Gotcha. So again using the example of the ApexChart.tsx file, do you understand for example how the 'xAxisLabelClickHandler' defined on line 510, is actually set up to be fired when the component's xAxis gets clicked? How is that connection established? My best guess is that it's done with the 'prepareOptions' function defined on line 201, but I still didn't see anything in there that explicitly says "when this part of the apexChart component is clicked, fire this handler function". Maybe the apexchart is handling a lot of it internally? ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 4, 2024, 5:50pm UTC](https://forum.inductiveautomation.com/t/adding-custom-event-handlers-to-module-react-components/98048/12 "2024-11-04T17:50:58Z")
> [@Jason\_Zhou](#): > > 'prepareOptions' function defined on line 201 Yeah, that's how I understand it. It looks like they're just mapping in all the chart events to trigger component events: > **[events – ApexCharts.js](https://apexcharts.com/docs/options/chart/events/)** > > chart: { events: { animationEnd: undefined, beforeMount: undefined, mounted: undefined, updated: undefined, mouseMove: undefined, mouseLeave: undefined, click: undefined, legendClick: undefined, markerClick: undefined, xAxisLabelClick: undefined,...