How to use ref in useLayoutEffect with OverlayScrollbarsComponent?

[krutoo]

Hi, i m trying to use OverlayScrollbarsComponent with defer={false} and ref.

But in useLayoutEffect viewport element (ref.current?.osInstance()?.elements().viewport) is undefined

Its defined only in useEffect.

I use viewport element for properly blocking page scroll when my modal is shown.

Layout effect is needed because otherwise when switching modals there is scroll bar blinking

[KingSora]

Good day @krutoo :)

The OverlayScrollbarsComponent uses exclusively useEffect since useLayoutEffect would trigger warnings on a server environment. Also the react team pushes heavily to use useEffect over useLayoutEffect. This means that its not possible with the OverlayScrollbarsComponent.

Luckily there is the useOverlayScrollbars hook which just gives you the initialize and instance functions so you could do something like this yourself.

export const OverlayScrollbarsLayoutEffectComponent = (props) => {
  const { options, events, defer, children, ...other } = props;
  const elementRef = useRef(null);
  const childrenRef = useRef(null);
  const [initialize, osInstance] = useOverlayScrollbars({ options, events, defer });
  
  useLayoutEffect(() => {
    const { current: elm } = elementRef;
    const { current: childrenElm } = childrenRef;
    if (elm && childrenElm) {
      initialize({
        target: elm,
        elements: {
          viewport: childrenElm,
          content: childrenElm,
        },
      });
    }
    return () => osInstance()?.destroy();
  }, [initialize, osInstance]);
  
  return (
    <div data-overlayscrollbars-initialize="" ref={elementRef} {...other}>
      <div data-overlayscrollbars-contents="" ref={childrenRef}>
        {children}
      </div>
    </div>
  );
}

[krutoo]

Can OverlayScrollbarsLayoutEffectComponent use "isomorphic layout effect" pattern?

We use it like this:

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

[KingSora]

@krutoo I also thought about that but ended up not using it in the end.. I'll think about it and see if I will change this decision - there should speak nothing against this except the react teams stance

[krutoo]

@KingSora thank you a lot, maybe environment check (typeof window) may be also moved directly inside of effect callback

or maybe you can add option for it