React Lazy Props
LazyLoad media elements with react-lazy-props and IntersectionObserver

Wrap the elements you want to lazyload with LazyProps component It will unload media before components were mounted and will load them only when they are observed.

import LazyProps from "react-lazy-props";
...
return (
<LazyProps>
<div>
<h2 style={{backgroundImage: `url("${backgroundImage}")`}}>Title</h2>
<p>Some Images</p>
<img src="example.jpg" srcSet={"example2x.jpg 2x", "example3x.jpg 3x"} />
<video src="https://www.example.com/video.ogg" />
</div>
</LazyProps>
);

LazyProps renders its child components with props and styles replaced according to the map:
  • src to data-src
  • srcSet to data-srcset
  • backgroundImage to data-bg-src

<div>
<h2 data-bg-src="url('background-image.png')">Titleh2>
<p>Some Imagesp>
<img data-src="example.jpg" data-srcset="example2x.jpg 2x, example3x.jpg 3x" />
<video data-src="https://www.example.com/video.ogg" />
div>

LazyProps component observes NodeList with Unloaded Prop Keys using IntersectionObserverAPI. As soon as at least 1/10 of Node element is intersected, element props will gain thier initial key.

<div>
<h2 style="background-image: url('background-image.png')">Titleh2>
<p>Some Imagesp>
<img src="example.jpg" srcset="example2x.jpg 2x, example3x.jpg 3x" />
<video src="https://www.example.com/video.ogg" />
div>

NOTE! Always wrap child components as LazyProps component returns its children unwrapped.

Arguments:
  • element - Node Object
Function will be invoked when one of the child elements is intersected.
import LazyProps from "react-lazy-props";
...
doSomething(element){
element.classList.add("intersected");
}
}
...
render {
return (
<LazyProps onElementLoad={element => this.doSomething(element)}>
...

Arguments:
  • props - Object
  • componentType - String
Function will be invoked after component props were unloaded, this way you will be able to customize unloaded props of the element, for example setup a placeholder src to images:
import LazyProps from "react-lazy-props";
...
setPlaceholder(props, componentType){
if(componentType === "img"){
props.src = this.state.placeholder;
}
}
return props;
}
...
render {
return (
<LazyProps onUnloadProps={(props, componentType)=> this.setPlaceholder(props, componentType)}>
...
NOTE! The function must always return props object.

Default: false
If set to true elements wont be unloaded, but observer still will be there, this approach will be more efficient because we will not have to loop through child elements and components unloading their props. The differecne is that you will have to set lazy props yourself:
import LazyProps from "react-lazy-props";
...
return (
<LazyProps unloaded={true}>
<div>
<h2 data-bg-src={backgroundImage}>Title</h2>
<p>Some Images</p>
<img data-src="example.jpg" />
<video data-src="https://www.example.com/video.ogg" />
</div>
</LazyProps>
);

Since this package is observing elements with IntersectionObserver, you may want old browsers to support it with IntersectionObserver polyfill

Copy link
On this page
Installation
Usage
Example:
Unloading process:
Loading process:
Component Props
children (undefined)
onElementLoad (function)
onUnloadProps (function)
unloaded (boolean)
IntersectionObserver polyfill
Credits