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

Progressively load images using a blur effect.
https://github.com/wcandillon/react-progressive-image-loading

progressive-image react

Last synced: 18 days ago
JSON representation

Progressively load images using a blur effect.

• Host: GitHub
• URL: https://github.com/wcandillon/react-progressive-image-loading
• Owner: wcandillon
• License: apache-2.0
• Created: 2017-05-01T13:00:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-11T04:05:46.000Z (over 3 years ago)
• Last Synced: 2024-10-14T05:27:04.016Z (about 1 month ago)
• Topics: progressive-image, react
• Language: TypeScript
• Size: 55.7 KB
• Stars: 120
• Watchers: 5
• Forks: 18
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Progressive Image Loading

Progressively load images using a blur effect.

[![CircleCI](https://circleci.com/gh/wcandillon/react-progressive-image-loading.svg?style=svg)](https://circleci.com/gh/wcandillon/react-progressive-image-loading)

[![npm version](https://badge.fury.io/js/react-progressive-image-loading.svg)](https://badge.fury.io/js/react-progressive-image-loading)

![example](http://i.imgur.com/fL5Qqvj.gif)

## Installation

```bash

$ npm install react-progressive-image-loading --save

```

## Import

```jsx

import ProgressiveImage from "react-progressive-image-loading";

```

## Usage

```jsx

 }

/>

```

Instead of using the `img` tag, you can use `background-image` with a `div`.

```jsx

 
}

/>

```


You can also customize the transition time and the timing function used for that transition.

```jsx

 }

/>

```