react-prog-img

A typescript react module to make progessive image loading, with possible lazy loading and auto detect image size

Usage no npm install needed!

<script type="module">
  import reactProgImg from 'https://cdn.skypack.dev/react-prog-img';
</script>

README

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}} />
    )
}

demo-basic


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}} />
    )
}

demo-blur-effect


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'}} />
        </>
    )
}

demo-lazy-loading


Props

Props Types Default Description
src* string the image src
conf* object {isLazy: false dimension: undefined} with this object you can set lazy loading on/off, you can also specify the dimension of the image(else it's auto detected)
smSrc string the src of the same image as src, but in lower quality to make it load real quick
alt string the alt of the image
ariaLabel string aria-label for the image
ariaLabelledBy object {component: 'p', txt: '', class: ''} aria-labelled-by (caption) for the image, you can chose the component, text and add a custom class
ariaDescribedBy object {component: 'p', txt: '', class: ''} aria-described-by for the image, you can chose the component, text and add a custom class
bg string '#eee' custom background placeholder (tips: dominant color of your image)
delay number 1 the transition delay of the image(s)
trans string 'linear' the transition effect name, you can also put cubic bezier curve
cstClass string a custom class for the placeholder
effect string 'blur' a css transition effect, you can put 'blur', 'black-n-white' or 'both, you can also create your own css/jss class

'*' means mandatory