[📖] useOnDocument about qwik

[Nefcanto]

@gioboa, at this time I have zero time for contribution. I'm so sorry, but I can't. Thank you for the offer.

[phatwillis]

useOnDocument and Other useOn Hooks

Overview

The useOnDocument hook, along with other useOn hooks, is part of the Vite plugin Qwik. These hooks provide a convenient way to handle events in your Qwik applications.

useOnDocument

The useOnDocument hook is specifically designed to handle events related to the document object. It is particularly useful when you want to execute a task when the document is ready or when certain events occur globally.

Example

import { useOnDocument } from 'vite-plugin-qwik';

function MyComponent() {
useOnDocument('DOMContentLoaded', () => {
// Your code to run when the document is ready
});

return (
// Your component JSX
);
}
In this example, the task inside useOnDocument will be executed when the DOM content has fully loaded.

Other useOn Hooks

The Qwik plugin provides additional useOn hooks for handling various events. These hooks include:

useOn(element, eventName, handler): Listens for events on a specific DOM element.
useOnWindow(eventName, handler): Listens for events on the window object.
useOnDocument(eventName, handler): As discussed earlier, listens for events on the document object.

Example

import { useOn, useOnWindow } from 'vite-plugin-qwik';

function AnotherComponent() {
useOn(document.getElementById('myElement'), 'click', () => {
// Your code to run when 'myElement' is clicked
});

useOnWindow('resize', () => {
// Your code to run when the window is resized
});

return (
// Your component JSX
);
`}```

[gioboa]

Hi @Nefcanto
Here you can find the documentation for them

[Nefcanto]

@gioboa, thank you so much. To be honest, that's counter-intuitive. I would expect it to be on the Lifecycle page.

[gioboa]

Can I encourage you to drop a PR for that?

[akash4566]

import { useOnDocument } from 'your-event-hooks-library';

const handleClick = (event) => {
// Your click event handling logic here
console.log('Document clicked!');
};

function MyComponent() {
useOnDocument('click', handleClick);

return (
// Your component JSX here
);
}

[gioboa]

I close it b/c we have the documentation page for this. Thanks 👍