react-lazy-load-component

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).


- Motivation
- Installation
- API docs
- Return value
- Example usage

Motivation

Often for large pages it would be ideal to not load components below the fold to improve performance.

Installation

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.

Example usage

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.

$3

As soon as at least 1px of the child element is visible in the parent document viewport,
isInViewport evaluates to true.

``jsx
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 (
loading} width="300" height="300">


)
}
`

API

$3

`typescript
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
}
``