https://github.com/dilane3/react-image-progressive-loading

React-image-progressive-loading is a library that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.
https://github.com/dilane3/react-image-progressive-loading

image lazy lazy-loading loading reactjs

Last synced: 7 days ago
JSON representation

React-image-progressive-loading is a library that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.

• Host: GitHub
• URL: https://github.com/dilane3/react-image-progressive-loading
• Owner: dilane3
• Created: 2021-09-16T13:23:47.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-09-25T13:01:42.000Z (about 3 years ago)
• Last Synced: 2024-10-25T13:41:42.336Z (21 days ago)
• Topics: image, lazy, lazy-loading, loading, reactjs
• Language: JavaScript
• Homepage:
• Size: 13.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-image-progressive-loading

React-image-progressive-loading is a tool that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.

When we create a website which will contains a lot of images (heavy images), the loading of the page will takes more time because, the browser might load all images which are present in the web page. That's why, this library is made up.

### installation

```bash

npm install react-image-progressive-loading

```

or

```bash

npm i react-image-progressive-loading

```

### usage

```javascript

import React from 'react'

import {Image} from 'react-image-progressive-loading'

const image = require("path/to/image.png").default

const ProfilImage = () => {

  return (

    

  )

}

export default ProfilImage

```

#### Props

|  prop  | Default value | required | Description |

|---     |---            |---       |---          |

|image   | not defined   | true     |This prop takes as value the source of the image|

|alt     | "loading"       | false    |It defines the description of the image when it's not loaded|

|className| image         | false    |It's used for styling the image on the web page|

|blur    | false         | false    |This prop is used for difining the type of loading that we want. If it's false, the background of te image will be gray while loading. If it's equal to true the background will be gray and there will be a blur             |

The default value of the `className` prop is defined like follow

```css

.image {

  width: 300px;

  height: 300px;

  margin: 10px;

}

```

you can provide another style. For exameple

```css

.image-style {

  width: 100%;

  height: 100%;

  margin: 10px;

}

```

and call it like that:

```javascript

// code here

const ProfilImage = () => {

  return (

    

  )

}

// code here

```