Repository files navigation

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 bases on Intersection Observer API

Quoted fromMDN: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

importReactfrom'react'import{render}from'react-dom'importLazyLoadComponentfrom'react-intersection-observer-lazy-load'importTestComponentfrom'./TestComponent';constApp=()=>{return(<LazyLoadComponent><TestComponent/></LazyLoadComponent>);};render(<App/>,document.getElementById('root'));

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

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, thedefaultPlaceholderStyle config is setting to defaultplaceholder, defaultwidth is 300px andheight is 300px;

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

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