#create a docment.element in layout.tsx

3 messages · Page 1 of 1 (latest)

fathom spire
#

I need to create a document element to initiate a context for google.maps.map in layout.tsx.
Vite errs "document is not defined" as s browser DOM is not created.
how can I resolve this matter?

crisp cargo
#

To access document you need to be inside a visible task, for example: ```typescript
import { component$, useSignal, useVisibleTask$ } from '@build.io/qwik';

export default component$(() => {
const divContent = useSignal<HTMLDivElement>();

useVisibleTask$(() => {
    const newDiv = document.createElement('div');
    newDiv.appendChild(document.createTextNode('Hello World'));
    document.body.insertBefore(newDiv, divContent.value!);
});

return (<>
    <h1>Title</h1>
    <div ref={ divContent }>Test</div>
</>);

}

fathom spire
#

nice.. thanks!
can I useStore to keep divContent in a context and use it by ref in another component?