react-prog-img v1.0.2

ProgImg

React component to do progressive image loading. It can handle lazy loading too (IntersectionObserver) and auto detect the image size.
I'm currently just a student and I did this module to learn stuff, if you want a more professional module for lazy loading and progressive image loading you can check React Lazy Load Image Component!

Features

• Progressive image loading using css effect
• Lazy loading using InterserctionObserver
• Image size auto detection before the image load
• Placeholder custom background
• Customizable description with aria-* attribute
• Customizable css transition effect
• Customizable image with jss or css class
• TypeScript declarations

Installation

# YARN
$ yarn add react-prog-img

# NPM
$ npm i react-prog-img 

Basic usage

import React from 'react'
import ProgImg from 'react-prog-img'

const Basic = () => {
    return(
        <ProgImg src="big-img-file.jpg" conf={{isLazy: false}} />
    )
}

import React from 'react'
import ProgImg from 'react-prog-img'

const MediumLikeEffect = () => {
    return(
        <ProgImg src="big-img-file.jpg" smSrc="small-file-who-load-faster.jpg" effect="blur" conf={{isLazy: false}} />
    )
}

import React from 'react'
import ProgImg from 'react-prog-img'

const LazyLoad = () => {
    return(
        <>
            <div className="lot-of-margin-bottom">
            <ProgImg src="big-img-file.jpg" bg="#ceb4cb" conf={{isLazy: true, dimension: { width: 600, height: 300 }}} ariaDescribedBy={{component: 'h5', txt: 'caption'}} />
        </>
    )
}

Props

'*' means mandatory