lazy-load component with intersection observer API

Usage no npm install needed!

<script type="module">
  import reactIntersectionObserverLazyLoad from '';


React Intersection Observer Lazy Load

NPM npm


react-intersection-observer-lazy-load is a lazy-load component which helps you load your components(or other contents) when these components enter into viewport(or target viewport).

React Intersection Observer Lazy Load Demo

react-intersection-observer-lazy-load bases on Intersection Observer API

Quoted from MDN: The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor element or viewport is referred to as the root.


npm install react-intersection-observer-lazy-load


basic demo


import React from 'react'
import { render } from 'react-dom'
import LazyLoadComponent from 'react-intersection-observer-lazy-load'
import TestComponent from './TestComponent';

const App = () => {
    return (


render(<App />, document.getElementById('root'));



Type: Object Default: {root: null, rootMargin: '0px 0px 0px 0px',threshold: []} options config is same as IntersectionObserver:


A specific ancestor of the target element being observed. If no value was passed to the constructor or this is null, the top-level document's viewport is used.


An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (px) or as a percentage (%). The default is "0px 0px 0px 0px".


A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.


Type: Object Default: {width:300, height:300} a default placeholder is presenting when a component is not loaded, the defaultPlaceholderStyle config is setting to default placeholder, default width is 300px and height is 300px;


Type: Element Default: null react-intersectionObserver-lazy-load` provides a default placeholder, and you could set your own placeholder.


Type: function Default: null Call this function whenever the in view state changes. It will receive the component self ref, alongside the current IntersectionObserverEntry.