Set root after mount for SSR

I’m using Next.js and I’d like to set root to a specific element.

window and document are only accessible after mount.

Is there an SSR-friendly way to wait until the component is mounted to set root?

Note: useEffect fires only after mount.

// this won't work; document not defined
const { ref, inView } = useInView({
    root: document.querySelector(".myroot"),
});

useEffect(() => {
    if (inView) {
        doSomething();
    }
}, [inView, doSomething]);

[allan2]

Thanks! I got it working in v1 and v2. I used two observers for v1, one above the target div. When that is hidden but the target is visible, I achieve my goal.

https://f4rwj.sse.codesandbox.io/ https://codesandbox.io/s/competent-cohen-f4rwj?file=/pages/index.tsx

[thebuilder]

You could use the new Intersectionobserver v2. Support is still limited https://caniuse.com/intersectionobserver-v2

Otherwise it might make sense to look at the scroll position?