React Viewport Lazy Load

A React component for lazy loading based on viewport visibility using Intersection Observer.

Installation

npm install react-lazy-observer
# or
yarn add react-lazy-observer

Features

Efficient lazy loading using Intersection Observer API Customizable threshold values Custom loading component support Seamless integration with React.Suspense

Usage

Basic Usage

import { LazyLoad } from 'react-lazy-observer';
import { lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <LazyLoad>
      <HeavyComponent />
    </LazyLoad>
  );
}

Custom Loading Component

import { LazyLoad } from 'react-lazy-observer';

function App() {
  return (
    <LazyLoad fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </LazyLoad>
  );
}

Customizing LoadingView

The default LoadingView can be customized:

import { LoadingView } from 'react-lazy-observer';

<LoadingView size={32} /> // Adjust spinner size

Props

| Prop | Type | Default | Description | | ---------- | ----------- | ----------------- | ------------------------------- | | children | ReactNode | required | Component to lazy load | | fallback | ReactNode | <LoadingView /> | Component to show while loading |

Examples

Basic Implementation

import { LazyLoad } from 'react-lazy-observer';
import { lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div style={{ minHeight: '200vh' }}>
      {/* Basic usage */}
      <LazyLoad>
        <HeavyComponent />
      </LazyLoad>

      {/* Custom threshold and loading */}
      <LazyLoad
        fallback={<div>Custom Loading...</div>}
      >
        <HeavyComponent />
      </LazyLoad>
    </div>
  );
}

TypeScript Support

Full TypeScript support with included type definitions.

interface LazyLoadProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

Browser Support

Supports all modern browsers that implement the Intersection Observer API.

License

MIT