How to run arbitrary javascript in response to an event?

[masenf]

Now that rx.client_side is deprecated and removed in 0.3.0, how can I write an event handler that runs arbitrary javascript in response to an event and actually get the args?

rx.call_script can be used to execute JS code, but it does not have access to the args of the event trigger unless they have been plumbed through via get_event_triggers. So for existing components, like rx.button, there is not a way to access the DOM event for an on_click without subclassing rx.Button and overwriting the event triggers... surely there must be an easier way?

[masenf]

rx.client_side was just syntax sugar over arbitrary javascript inside a Var with type EventChain. These Var objects may be created directly with more control over the results.

import reflex as rx


custom_handler = rx.vars.BaseVar(
    _var_name="ev => {window.alert(`You clicked at ${ev.clientX}, ${ev.clientY}`)}",
    _var_type=rx.EventChain,
)


def index():
    return rx.button(
        "Where Did I Click?",
        on_click=custom_handler,
    )


app = rx.App()
app.add_page(index)
app.compile()

Note: Custom event handlers added in this fashion can NOT be yielded from another event handler on the backend. For executing custom script from backend, rx.call_script must be used.

---

The custom JS code may interact with the backend state by formatting custom event chains. Here is the same example, but with updating state instead of displaying a browser alert.

import reflex as rx


class State(rx.State):
    coordinates: tuple[int, int] = (0, 0)

    def update_coordinates(self, clientX, clientY):
        self.coordinates = (clientX, clientY)


custom_event_chain = rx.EventChain(
    events=[State.update_coordinates("${ev.clientX}", "${ev.clientY}")]
)
custom_handler = rx.vars.BaseVar(
    _var_name=f"ev => {rx.utils.format.format_event_chain(custom_event_chain)}",
    _var_type=rx.EventChain,
)

def index():
    return rx.vstack(
        rx.heading(State.coordinates.to_string()),
        rx.button(
            "Where Did I Click?",
            on_click=custom_handler,
        )
    )


app = rx.App()
app.add_page(index)
app.compile()

---

And for posterity, here is the "proper" way to accomplish the same result without custom code:

from typing import Any
import reflex as rx


class State(rx.State):
    coordinates: tuple[int, int] = (0, 0)

    def update_coordinates(self, clientX, clientY):
        self.coordinates = (clientX, clientY)


class DOMClickEvent(rx.Base):
    clientX: int
    clientY: int


def click_coordinate_signature(e: DOMClickEvent):
    return [e.clientX, e.clientY]


class CoordinateCaptureButton(rx.Button):
    def get_event_triggers(self) -> dict[str, Any]:
        return {
            **super().get_event_triggers(),
            rx.constants.EventTriggers.ON_CLICK: click_coordinate_signature
        }


def index():
    return rx.vstack(
        rx.heading(State.coordinates.to_string()),
        CoordinateCaptureButton.create(
            "Where Did I Click?",
            on_click=State.update_coordinates,
        )
    )


app = rx.App()
app.add_page(index)
app.compile()

[abdullahkhalids]

Thanks. This is very nice. I don't see any documentation or examples on how to use call_script. Could you possibly add an example of how to do the same thing using call_script?

[masenf]

I will be adding docs for call_script very soon. The middle example should work with call_script... but for the most part, call_script is designed for interfacing with third party scripts and for calling imperative functions on component refs. Unfortunately, the javascript eval cannot return a value (as far as I know), so it cannot be used to retrieve arbitrary values from the client. (This is incorrect, but not currently wired up in reflex...)

[CohPhol]

Any update on how to use format_event_chain on 0.6.5? I've tried str(rx.Var.create(event_chain)) that was stated to be an alternative for it, but doesn't work,The error was: TypeError: None is not a callable object.

I've also changed the codes from:

custom_event_chain = rx.EventChain(
    events=[State.update_coordinates("${ev.clientX}", "${ev.clientY}")]
)
custom_handler = rx.vars.BaseVar(
    _var_name=f"ev => {rx.utils.format.format_event_chain(custom_event_chain)}",
    _var_type=rx.EventChain,
)

To:

custom_event_chain = rx.EventChain(
    events=[State.update_coordinates("${ev.clientX}", "${ev.clientY}")]
)
custom_handler = rx.vars.base.var(
    _var_name=f"ev => {str(rx.Var.create(custom_event_chain))}",
    _var_type=rx.EventChain,
)

P.S. I just used your code as a sample, it's not my exact code but it is kinda similar.