How to get viewport dimensions in reflex?

[masenf]

Reflex does not have some on_resize event, how can we update state when the viewport is resized?

[masenf]

How to Get Viewport in JS

The viewport dimensions can be accessed in javascript via the window.innerWidth and window.innerHeight attributes. When the viewport size changes, the browser fires the resize event on the window.

How to Get Viewport in Reflex

Using a custom react hook, we can register a reflex state EventHandler as the window.onresize event handler and get the latest viewport dimensions whenever they change.

Custom Reflex Component

Edit: updated to work with Reflex 0.6.7+

ResizeWatcher will extend rx.Fragment, which does not render anything in the DOM.

Define on_resize as an EventHandler with the required function signature so that it can be linked to an event handler in the state. Note that we must explicitly remove this prop via _exclude_props method (which is a bit of a gotcha)

def _on_resize_signature(width: rx.Var[int], height: rx.Var[int]) -> tuple[rx.Var[int], rx.Var[int]]:
    return width, height


class ResizeWatcher(rx.Fragment):
    """
    A component that watches the window size and updates the state.
    
    The only event trigger in `on_resize` which is called once when the component mounts
    and again each time the viewport dimensions change.
    """

    on_resize: rx.EventHandler[_on_resize_signature]

    def _exclude_props(self) -> list[str]:
        return ["on_resize"]

Defining add_imports and add_hooks injects custom code directly into the component. In this case the useEffect allows us to register an event handler while respecting the react component lifecycle.

    def add_imports(self) -> dict[str, str]:
        return {"react": "useEffect"}

    def add_hooks(self) -> list[str]:
        """Register backend on_resize as a handler for the browser window resize event."""
        return [
            """
            useEffect(() => {
                function handleResize() {
                    %s(window.innerWidth, window.innerHeight);
                }

                // Fire initial resize event when the component mounts.
                handleResize();

                // Add the event listener with cleanup.
                window.addEventListener("resize", handleResize);
                return () => window.removeEventListener("resize", handleResize);
            }, []);""" % (
                self.event_triggers["on_resize"]
            )
        ]

This is a critical line %s(window.innerWidth, window.innerHeight); where the actual viewport dimensions are passed to what will become the memoized event handler function that references the state event handler name.

Define Event Handler and State

First define some attributes that we will render in the frontend.

class State(rx.State):
    viewport_width: int = 0
    viewport_height: int = 0
    device: str = "undetermined"

Then define the event handler that will be called when the resize event fires.

    def set_viewport(self, width: int, height: int) -> None:
        self.viewport_width = width
        self.viewport_height = height
        self.device = device_guess(width)

Putting it all together

Demo 📼

Screen.Recording.2024-01-25.at.9.25.54.PM.mov

import reflex as rx


def device_guess(width: int) -> str:
    if width < 520:
        return "phone"
    elif width < 768:
        return "phone-landscape"
    elif width < 1024:
        return "tablet"
    elif width < 1280:
        return "tablet-landscape"
    elif width < 1640:
        return "laptop"
    else:
        return "desktop"


class State(rx.State):
    viewport_width: int = 0
    viewport_height: int = 0
    device: str = "undetermined"

    def set_viewport(self, width: int, height: int) -> None:
        self.viewport_width = width
        self.viewport_height = height
        self.device = device_guess(width)


def _on_resize_signature(width: rx.Var[int], height: rx.Var[int]) -> tuple[rx.Var[int], rx.Var[int]]:
    return width, height


class ResizeWatcher(rx.Fragment):
    """
    A component that watches the window size and updates the state.
    
    The only event trigger in `on_resize` which is called once when the component mounts
    and again each time the viewport dimensions change.
    """

    on_resize: rx.EventHandler[_on_resize_signature]

    def _exclude_props(self) -> list[str]:
        return ["on_resize"]

    def add_imports(self) -> dict[str, str]:
        return {"react": "useEffect"}

    def add_hooks(self) -> list[str]:
        """Register backend on_resize as a handler for the browser window resize event."""
        return [
            """
            useEffect(() => {
                function handleResize() {
                    %s(window.innerWidth, window.innerHeight);
                }

                // Fire initial resize event when the component mounts.
                handleResize();

                // Add the event listener with cleanup.
                window.addEventListener("resize", handleResize);
                return () => window.removeEventListener("resize", handleResize);
            }, []);""" % (
                self.event_triggers["on_resize"]
            )
        ]


def index() -> rx.Component:
    return rx.vstack(
        ResizeWatcher.create(on_resize=State.set_viewport),
        rx.heading("Viewport Resize Watcher Demo"),
        rx.heading(f"[{State.viewport_width}, {State.viewport_height}]"),
        rx.heading(f"Device: {State.device}"),
        align="center",
        font_size="2em",
        padding_top="10%",
    )


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

[matejkadlec]

Not working as of Dec 2024, returns 0 for both width and height, and 'undetermined' for device. Do not try to implement this in your code. Also deprecated unannotated event handler arguments.

[benedikt-bartscher]

@matejkadlec which event handler argument are you referring to?

[masenf]

updated for 0.6.7+ to simplify the code and remove unannotated event handler arguments.

@matejkadlec what browser are you testing with?