A react component that allows lazy components to load once they are in viewpoint. It uses the IntersectionObserver. Once a component is triggered to load, it will stay loaded (does not unload).
Often for large pages it would be ideal to not load components below the fold to improve performance.
npm install react-lazy-load-component
Please note that this hook declares react
and as peer dependency. Therefore, you must have
react
installed to use this package.
Note: This hook relies on Intersection Observer API and hence if you want to use it in a browser that doesn't support it, the onus of shipping the polyfill is on the developer.
A CRA based example app (which is also used in the test suite) can be found under examples/cra. Inline examples showcasing use-cases are below.
As soon as at least 1px of the child element is visible in the parent document viewport,
isInViewport
evaluates to true.
import React from 'react'
import ReactDOM from 'react-dom'
import LazyLoadComp from 'react-lazy-load-component'
const MyBigComponent = React.lazy( () => import('./MyBigComponent')); // your component to load
export default function SimpleElement() {
return (
<LazyLoadComp fallback={<h1>loading</h1>} width="300" height="300">
<MyBigComponent/>
</LazyLoadComp>
)
}
interface IProps {
width?: number; // optional: set the height of the placeholder space. Default: 400
height?: number; // optional: set the width of the placeholder space. Default: 300
fallback?: FallbackType; // optional: set a fallback component while loading. Default: null (nothing)
threshold?: number; // optional: the percentage of the component in-viewpoint to start loading process. Default: 0.1%
onVisibleChange?: (visible:boolean)=>void; // optional: callback on visibility change for custom logic
children?: React.ReactNode; // your React.lazy-ified component
}