The library is not working

[pavelzubov]

What stage is this library in? I see that createUseObserverVisible returns true constantly: https://github.com/TinkoffCreditSystems/react-lazy-hydration-render/blob/master/src/use-observer-visible.ts

export const createUseObserverVisible = (observerOptions: IntersectionObserverInit) => (
  containerRef: RefObject<HTMLDivElement>
) => {
  return true;
};

I'm trying to use createUseObserverVisible from "react-lazy-hydration-render/lib/use-observer-visible.browser", but am catching TS error.

TS2322: Type '(containerRef: RefObject<HTMLDivElement>) => boolean' is not assignable to type '(containerRef: RefObject<HTMLElement>) => boolean'.   Types of parameters 'containerRef' and 'containerRef' are incompatible.     Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.       Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.

(I think you need to change HTMLDivElement to HTMLElement in containerRef). I was change it, but createUseObserverVisible with IntersectionObserver don't change isVisible to true. And I see that this library isn't working (DOM elements aren't hydrated, I didn't understand why). Can I fix this or project is not supported?

[SuperOleg39]

Hi!

About stage - i think, this library is production ready.

About createUseObserverVisible: We use browser field of package.json, where separate createUseObserverVisible implementation for server and browser environment. Here browser field specification.

Javascript bundlers, webpack for example, support this field, and replace specified module for the right environment (you can generate one bundle for browser, and another for server, or only browser)

In this way, you don't need react-lazy-hydration-render/lib/use-observer-visible.browser directly)

And looks like HTMLDivElement is really too specific, thank you!