event_triggers.md 9.7 KB
from datetime import datetime
import reflex as rx
from pcweb.templates.docpage import docdemo, h1_comp, text_comp, docpage
SYNTHETIC_EVENTS = [
{
"name": "on_focus",
"description": "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.",
"state": """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!"
""",
"example": """rx.chakra.input(value = FocusState.text, on_focus=FocusState.change_text)""",
},
{
"name": "on_blur",
"description": "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.",
"state": """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!"
""",
"example": """rx.chakra.input(value = BlurState.text, on_blur=BlurState.change_text)""",
},
{
"name": "on_change",
"description": "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.",
"state": """class ChangeState(rx.State):
checked: bool = False
""",
"example": """rx.switch(on_change=ChangeState.set_checked)""",
},
{
"name": "on_click",
"description": "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.",
"state": """class ClickState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(ClickState.text, on_click=ClickState.change_text)""",
},
{
"name": "on_context_menu",
"description": "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.",
"state": """class ContextState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(ContextState.text, on_context_menu=ContextState.change_text)""",
},
{
"name": "on_double_click",
"description": "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.",
"state": """class DoubleClickState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(DoubleClickState.text, on_double_click=DoubleClickState.change_text)""",
},
{
"name": "on_mount",
"description": "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.",
"state": """class MountState(rx.State):
events: list[str] = []
def on_mount(self):
self.events = self.events[-4:] + ["on_mount @ " + str(datetime.now())]
""",
"example": """rx.vstack(rx.foreach(MountState.events, rx.text), on_mount=MountState.on_mount)""",
},
{
"name": "on_unmount",
"description": "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.",
"state": """class UnmountState(rx.State):
events: list[str] = []
def on_unmount(self):
self.events = self.events[-4:] + ["on_unmount @ " + str(datetime.now())]
""",
"example": """rx.vstack(rx.foreach(UnmountState.events, rx.text), on_unmount=UnmountState.on_unmount)""",
},
{
"name": "on_mouse_up",
"description": "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.",
"state": """class MouseUpState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseUpState.text, on_mouse_up=MouseUpState.change_text)""",
},
{
"name": "on_mouse_down",
"description": "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.",
"state": """class MouseDown(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseDown.text, on_mouse_down=MouseDown.change_text)""",
},
{
"name": "on_mouse_enter",
"description": "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.",
"state": """class MouseEnter(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseEnter.text, on_mouse_enter=MouseEnter.change_text)""",
},
{
"name": "on_mouse_leave",
"description": "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.",
"state": """class MouseLeave(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseLeave.text, on_mouse_leave=MouseLeave.change_text)""",
},
{
"name": "on_mouse_move",
"description": "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.",
"state": """class MouseMove(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseMove.text, on_mouse_move=MouseMove.change_text)""",
},
{
"name": "on_mouse_out",
"description": "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.",
"state": """class MouseOut(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseOut.text, on_mouse_out=MouseOut.change_text)""",
},
{
"name": "on_mouse_over",
"description": "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.",
"state": """class MouseOver(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """rx.button(MouseOver.text, on_mouse_over=MouseOver.change_text)""",
},
{
"name": "on_scroll",
"description": "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.",
"state": """class ScrollState(rx.State):
text = "Change Me!"
def change_text(self):
if self.text == "Change Me!":
self.text = "Changed!"
else:
self.text = "Change Me!"
""",
"example": """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%",
)""",
},
]
for i in SYNTHETIC_EVENTS:
exec(i["state"])
def component_grid():
events = []
for event in SYNTHETIC_EVENTS:
events.append(
rx.vstack(
h1_comp(text=event["name"]),
text_comp(text=event["description"]),
docdemo(
event["example"], state=event["state"], comp=eval(event["example"])
),
align_items="left",
)
)
return rx.box(*events)
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.
rx.box(
rx.chakra.divider(),
component_grid(),
)