IntersectionObserver.tsx

import plusnew, { component, Props, store } from "@plusnew/core";
import { ElementLifecycle } from "@plusnew/driver-dom";

type props = {
  children: any;
};

export default component(
  __dirname,
  (Props: Props<props>, componentInstance) => {
    const show = store(false);
    const observer = new IntersectionObserver((entries) => {
      if (entries.some((entry) => entry.isIntersecting)) {
        show.dispatch(true);
      }
    });

    componentInstance.registerLifecycleHook("componentWillUnmount", () =>
      observer.disconnect()
    );

    return (
      <ElementLifecycle
        elementDidMount={(element) => {
          observer.observe(element);
        }}
      >
        <div>
          <show.Observer>
            {(showState) =>
              showState && <Props>{(props) => props.children}</Props>
            }
          </show.Observer>
        </div>
      </ElementLifecycle>
    );
  }
);