react-component-lazy-loader
v1.1.3
A package which lazily loads it's children components based on viewport visibility of the component. Useful in lazyloading images or any other custom component.
0/weekUpdated 3 years agoISCUnpacked: 20.3 KB
Published by Shrey Sudan
npm install react-component-lazy-loaderReact Component Lazy Loader
A simple React component, which lazily loads it's children based on viewport visibility. Uses Intersection Observer API for increased performance, if browser supports it, otherwise fallbacks to an event based system to check for position of component with respect to viewport.
Handles both vertical as well as horizontal LazyLoading of elements.
$3
``
npm install react-component-lazy-loader
`
$3
Simply wrap the component which you want to lazily load with ReactComponentLazyLoader and based on the props given, the component will start rendering it's children only when they're visible in viewport.
`javascript
import ReactComponentLazyLoader from 'react-component-lazy-loader';
...
...
`
Props
$3
A positive value for thresholdY(default: 0) makes components load sooner, when scrolling vertically in the viewport.
Similarly, a negative value for thresholdY will make components load later.
`javascript
`
In above example, the will render when the
component is 200 pixels below the fold. With no threshold value provided, default value is used, in which case the component will get rendered only when it comes above the fold/gets visible in the viewport.
$3
A positive value for thresholdX(default: 0) makes components load sooner, when scrolling horizontally.
Similar to thresholdX, a negative value for thresholdX will make components load later.
`javascript
`
$3
Placeholder is rendered until the component's thresholdX/thresholdY value plus viewport size is not reached. Normally which means placeholder gets rendered till the component is above the fold.
Placeholder can be anything - a simple with a default image or any other valid React custom component. Default value for placeholder is any empty
i.e, an empty div will get rendered as a placeholder, until the condition to render the children is not met.
`javascript
`
$3
Prop to prevent lazyloading of components when doing horizontal scroll. Default value for this is false.
$3
A callback function which when passed, will be called once the lazyloading condition is met and actual component gets rendered on screen.
`javascript
placeholder={}
callback={() => {// Do something}>
``
$3
Typically, horizontal scroll is implemented with respect to a parent container and not the body of the document, hence in order to lazyload components on horizontal scroll, an id would need to be set on the parent element, with respect to which horizontal scroll happens.
This id would need to be passed as a prop named wrapperID to the ReactComponentLazyLoader, for horizontal lazyloading to work.