@montagejs/react-lazy-load-image NPM

React-Lazy-Load-Image

react image lazy loading component with built-in image preloading capabilities.

Usage

$ npm i @montagejs/react-lazy-load-image --save

import { FC } from 'react';
import ReactLazyLoadImage, { ReactLazyLoadImageProvider } from '@montagejs/react-lazy-load-image';

const ReactLazyLoadImageDemo: FC = () => {

    return (
        <ReactLazyLoadImageProvider
            getPopupContainer={() => document.querySelector('.img-container')}
        >
            <div className="img-container" >
                <ReactLazyLoadImage
                    src={
                        'xxxx'
                    }
                />
            </div>
        </ReactLazyLoadImageProvider>
    );
};

export default ReactLazyLoadImageDemo;

API

Main parameter configuration：

ReactLazyLoadImageProvider

props	desc	type	default	version
`getPopupContainer`	A container that listens to viewport scrolling	`() => HTMLElement`	`() => document.documentContent`	`>0.0.4`
`preload`	Whether to enable preloading	`boolean ｜ { src: string; }`	`false`	`>0.0.4`
`disabledLoading`	Whether to disable native `loading`	`boolean`	`false`	`>0.0.4`