Package Exports

react-dom-lazyload-component
react-dom-lazyload-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dom-lazyload-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dom-lazyload-component

Coming soon...

Install

npm i react-dom-lazyload-component

yarn add react-dom-lazyload-component

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-dom-lazyload-component';
import { Header, Main, Footer, Loading } from './MyComponents';

const App = () => (
    <>
        <Header />
        <Main />
        {/* Footer is not needed to be rendered first. */}
        {/* This will optimize Core Web Vitals */}
        <LazyLoad
          as='footer'
          render={(isVisible) => isVisible ? <Footer /> : <Loading />}
          rootMargin: '200px 0px'
        />
    </>
)

ReactDOM.render(<App />, document.body);

Props

LazyLoad

Name	Required	Type	Default	Description
render	Yes	(isVisible: boolean) => JSX.Element \| null	-	`isVisible` is whether the component is in the viewport or not.
rootId	No	string	-	The id of element which is `IntersectionObserver`'s target. If `rootId` is not specified, then the bounds of the actual document viewport are used. This prop wraps IntersectionObserver.root.
rootMargin	No	string	-	Please see IntersectionObserver.rootMargin.
threshold	No	number \| number[]	-	Please see IntersectionObserver.thresholds.
forceVisible	No	boolean	false	You can forces the component to display regardless of whether the element is visible in the viewport.
as	No	string	-	You can specify tag name to `LazyLoad` component.

LazyLoad also can be received props like className, style and id.

Browser Support

Please see Intersection Observer API.

Demo

https://hiroki0525.github.io/react-dom-lazyload-component/