✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Event Triggers
Components can modify the state based on user events such as clicking a button or entering text in a field. These events are triggered by event triggers.
Event triggers are component specific and are listed in the documentation for each component.
on_focus
The on_focus event handler is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.
class FocusState(rx.State):
text = "Change Me!"
def change_text(self, text):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.input(
value=FocusState.text, on_focus=FocusState.change_text
)on_blur
The on_blur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.
class BlurState(rx.State):
text = "Change Me!"
def change_text(self, text):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.input(
value=BlurState.text, on_blur=BlurState.change_text
)on_change
The on_change event handler is called when the value of an element has changed. For example, it’s called when the user types into a text input each keystoke triggers the on change.
class ChangeState(rx.State):
checked: bool = False
rx.switch(on_change=ChangeState.set_checked)on_click
The on_click event handler is called when the user clicks on an element. For example, it’s called when the user clicks on a button.
class ClickState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(ClickState.text, on_click=ClickState.change_text)The on_context_menu event handler is called when the user right-clicks on an element. For example, it’s called when the user right-clicks on a button.
class ContextState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
ContextState.text,
on_context_menu=ContextState.change_text,
)on_double_click
The on_double_click event handler is called when the user double-clicks on an element. For example, it’s called when the user double-clicks on a button.
class DoubleClickState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
DoubleClickState.text,
on_double_click=DoubleClickState.change_text,
)on_mount
The on_mount event handler is called after the component is rendered on the page. It is similar to a page on_load event, although it does not necessarily fire when navigating between pages.
class MountState(rx.State):
events: list[str] = []
def on_mount(self):
self.events = self.events[-4:] + [
"on_mount @ " + str(datetime.now())
]
rx.vstack(
rx.foreach(MountState.events, rx.text),
on_mount=MountState.on_mount,
)on_unmount
The on_unmount event handler is called after removing the component from the page. However, on_unmount will only be called for internal navigation, not when following external links or refreshing the page.
class UnmountState(rx.State):
events: list[str] = []
def on_unmount(self):
self.events = self.events[-4:] + [
"on_unmount @ " + str(datetime.now())
]
rx.vstack(
rx.foreach(UnmountState.events, rx.text),
on_unmount=UnmountState.on_unmount,
)on_mouse_up
The on_mouse_up event handler is called when the user releases a mouse button on an element. For example, it’s called when the user releases the left mouse button on a button.
class MouseUpState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseUpState.text, on_mouse_up=MouseUpState.change_text
)on_mouse_down
The on_mouse_down event handler is called when the user presses a mouse button on an element. For example, it’s called when the user presses the left mouse button on a button.
class MouseDown(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseDown.text, on_mouse_down=MouseDown.change_text
)on_mouse_enter
The on_mouse_enter event handler is called when the user’s mouse enters an element. For example, it’s called when the user’s mouse enters a button.
class MouseEnter(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseEnter.text, on_mouse_enter=MouseEnter.change_text
)on_mouse_leave
The on_mouse_leave event handler is called when the user’s mouse leaves an element. For example, it’s called when the user’s mouse leaves a button.
class MouseLeave(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseLeave.text, on_mouse_leave=MouseLeave.change_text
)on_mouse_move
The on_mouse_move event handler is called when the user moves the mouse over an element. For example, it’s called when the user moves the mouse over a button.
class MouseMove(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseMove.text, on_mouse_move=MouseMove.change_text
)on_mouse_out
The on_mouse_out event handler is called when the user’s mouse leaves an element. For example, it’s called when the user’s mouse leaves a button.
class MouseOut(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(MouseOut.text, on_mouse_out=MouseOut.change_text)on_mouse_over
The on_mouse_over event handler is called when the user’s mouse enters an element. For example, it’s called when the user’s mouse enters a button.
class MouseOver(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.button(
MouseOver.text, on_mouse_over=MouseOver.change_text
)on_scroll
The on_scroll event handler is called when the user scrolls the page. For example, it’s called when the user scrolls the page down.
Scroll to make the text below change.
Change Me!
Scroll to make the text above change.
class ScrollState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
rx.vstack(
rx.text("Scroll to make the text below change."),
rx.text(ScrollState.text),
rx.text("Scroll to make the text above change."),
on_scroll=ScrollState.change_text,
overflow="auto",
height="3em",
width="100%",
)
Copyright © 2023 Pynecone, Inc.