Special Events

Reflex includes a set of built-in special events that can be utilized as event triggers or returned from event handlers in your applications. These events enhance interactivity and user experience. Below are the special events available in Reflex, along with explanations of their functionality:

Perform a console.log in the browser's console.

rx.button("Log", on_click=rx.console_log("Hello World!"))

When triggered, this event logs a specified message to the browser's developer console. It's useful for debugging and monitoring the behavior of your application.

scroll to an element in the page

rx.button(
    "Scroll to download button",
    on_click=rx.scroll_to("download button"),
)

When this is triggered, it scrolls to an element passed by id as parameter. Click on button to scroll to download button (rx.download section) at the bottom of the page

Redirect the user to a new path within the application.

• path: The destination path or URL to which the user should be redirected.
• external: If set to True, the redirection will open in a new tab. Defaults to False.

rx.vstack(
    rx.button(
        "open in tab",
        on_click=rx.redirect(
            "/docs/api-reference/special-events"
        ),
    ),
    rx.button(
        "open in new tab",
        on_click=rx.redirect(
            "https://github.com/reflex-dev/reflex/",
            external=True,
        ),
    ),
)

When this event is triggered, it navigates the user to a different page or location within your Reflex application. By default, the redirection occurs in the same tab. However, if you set the external parameter to True, the redirection will open in a new tab or window, providing a seamless user experience.

This event can also be run from an event handler in State. It is necessary to return the rx.redirect().

class RedirectExampleState(rx.State):
    """The app state."""

    def change_page(self):
        return rx.redirect(
            "https://github.com/reflex-dev/reflex/",
            external=True,
        )


def redirect_example():
    return rx.vstack(
        rx.button(
            "Change page in State",
            on_click=RedirectExampleState.change_page,
        ),
    )

Set the specified text content to the clipboard.

rx.button(
    'Copy "Hello World" to clipboard',
    on_click=rx.set_clipboard("Hello World"),
)

This event allows you to copy a given text or content to the user's clipboard. It's handy when you want to provide a "Copy to Clipboard" feature in your application, allowing users to easily copy information to paste elsewhere.

Set the value of a specified reference element.

rx.hstack(
    rx.input(id="input1"),
    rx.button("Erase", on_click=rx.set_value("input1", "")),
)

With this event, you can modify the value of a particular HTML element, typically an input field or another form element.

Create a window alert in the browser.

rx.button("Alert", on_click=rx.window_alert("Hello World!"))

Download a file at a given path.

Parameters:

• url: The URL of the file to be downloaded.
• data: The data to be downloaded. Should be str or bytes, data: URI, PIL.Image, or any state Var (to be converted to JSON).
• filename: The desired filename of the downloaded file.

rx.button(
    "Download",
    on_click=rx.download(
        url="/reflex_banner.png",
        filename="different_name_logo.png",
    ),
    id="download button",
)