useOn

Tanto useOn como useOnDocument y useOnWindow son otro tipo de métodos de extrema utilidad que nos proporciona Qwik.

• useOn nos permite acoplarle un listener al componente en el que nos encontremos. Muchas veces, lo preferiremos hacer de esta forma en lugar de dentro del markup. Recibe como primer parámetro el evento al que quieras escuchar, y como segundo el callback.
• Los otros dos métodos nos sirven para acoplarle listeners al document y al window, respectivamente.

Puedes encontrar un ejemplo de la combinación entre por ejemplo useOnWindowy un par de listeners en una aplicación que pretenda hacer un burger menú en pequeños dispositivos y un menú lista en dispositivos con una mayor resolución. Aquí te dejo un ejemplo de código:

    import { $, component$, useOnWindow, useStore } from "@builder.io/qwik";
    import { IconClose, IconMenu } from "../icons";
    
    export const Navigation = component$(() => {
      const store = useStore({
        isNavOpen: false,
        windowWidth: 0,
      });
    
      useOnWindow(
        "load",
        $(() => {
          store.windowWidth = window.innerWidth;
        })
      );
    
      useOnWindow(
        "resize",
        $(() => {
          store.windowWidth = window.innerWidth;
        })
      );
    
      return (
        <nav>
          {/* Desktop Menu  */}
          {store.isNavOpen || store.windowWidth > 768 ? (
            <ul class={store.isNavOpen ? "open" : ""}>
              <li>
                <a href="/">Inicio</a>
              </li>
              <li>
                <a href="/about">Sobre mí</a>
              </li>
              <li>
                <a href="/contact">Contacto</a>
              </li>
            </ul>
          ) : (
            ""
          )}
          {/* Open Button  */}
          {!store.isNavOpen ? (
            <button
              class="nav-open"
              aria-label="Open Menu"
              onClick$={() => (store.isNavOpen = !store.isNavOpen)}
            >
              <IconMenu />
            </button>
          ) : (
            ""
          )}
          {/* Close Button  */}
          {store.isNavOpen ? (
            <button
              class="nav-close"
              aria-label="Close Menu"
              onClick$={() => (store.isNavOpen = !store.isNavOpen)}
            >
              <IconClose />
            </button>
          ) : (
            ""
          )}
        </nav>
      );
    });