react-lazy-load-component
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

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

Edit use-intersection-observer example

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.

Example 1: Element with its parent document as viewport

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

API

react-lazy-load-component props

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
}

Package Sidebar

Install

npm i react-lazy-load-component

Weekly Downloads

31

Version

1.0.9

License

MIT

Unpacked Size

750 kB

Total Files

32

Last publish

Collaborators

  • jadbox