React Deferrable View

Motivation 💎

Wrap lazy loaded react components with ReactDeferrableView component to defer their script load until they appear viewport. Uses Intersection Observer under the hood and also exposes hook useIntersectionObserver for advanced use cases. Defer loading lazy react components results in performance improvements on page load as initial script load size is reduced.

---

Quick Start 🚀

Install npm package react-deferrable-view

npm i react-deferrable-view

Wrap your lazy loaded react components in DeferrableView component.

const LazyLoad = React.lazy(() => import("./LazyLoad.tsx"));

function App() {
 return <DeferrableView>
           <LazyLoad />
        </DeferrableView>
}

(Optional) Use renderPlaceholder prop to provide custom placeholder element

 <DeferrableView
    renderPlaceholder={({ htmlRef }) => (
            <h3 ref={htmlRef as RefObject<HTMLHeadingElement>}>Fallback component</h3>
          )}>
    <LazyLoad />
</DeferrableView>

Props

All props are optional.

options - override intersection observer options

renderPlaceholder - callback function to provide placeholder element. Defaults to empty div element.

---

Demo

Coming Soon