Nullifying Precipitation Machine

    @souvik1991/react-lazy-load-image

    1.0.5 • Public • Published

    Lazy Load Image Component using React Hook

    Lazy Load any Image using this easy to use React Component. It uses React Hooks out of the box, takes care of component unmount. It prevents the state variable update once the React Component is unmounted.

    It's fast, easy on the browser, works in IE8+, 7KB minified. It uses the debounce function by default.

    It automatically detects the container which is scrollable and binds scroll event with it.

    build status dependency status

    Installation

    Lazy Load Image Component using React Hook requires React 16.13 or later.

    npm install @souvik1991/react-lazy-load-image --save
    

    Live Demo

    Usage

    import React from 'react';
    import LazyLoadImage from "@souvik1991/react-lazy-load-image";
    
    const DemoComponent = () => {
        const mediaUrl = 'https://apod.nasa.gov/apod/image/2010/IMG_7493Colour.jpg';
        return (
            <LazyLoadImage
                className="media"
                alt="post pic"
                placeholder={require('../../static/images/gray.svg')}
                src={mediaUrl}
                onError={() => {
                    console.log('Unable to load the image')
                }}
                onContentLoaded={() => {
                    console.log('I am loaded');
                }}
                onContentVisible={() => {
                    console.log('I am visible');
                }}
            ></LazyLoadImage>
        )
    }

    Props

    placeholder

    Type: String Required: Yes

    The placeholder is a required props for the plug-in to work. This accept the placeholder image source which will be disaplayed until the image appear in view port. It will also be displayed until the image is loaded.

    src

    Type: String Required: Yes

    The src is a required props for the plug-in to work. This accept the original source of the image which will be loaded once the image is in view port.

    alt

    Type: String Default: Lazy loaded image

    The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

    height

    Type: String|Number

    This is used to set the elements height even when it has no content.

    width

    Type: String|Number

    This is used to set the elements width even when it has no content.

    onError

    Type Function

    A callback function which will be called if it's fails to load the Image.

    onContentVisible

    Type Function

    A callback function to execute when the content appears on the screen.

    onContentLoaded

    Type Function

    A callback function to execute when the content is loaded.

    debounceDelay

    Type Number Default: 500

    The debounce is managed by an internal function that prevents performance issues from continuous firing of scroll events. Using a debounce will set a small timeout when the user scrolls and will keep debouncing until the user stops. The default is 500 milliseconds.

    Install

    npm i @souvik1991/react-lazy-load-image

    DownloadsWeekly Downloads

    14

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • souvikmaity1991