Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month ago
JSON representation

Progressively load images using a blur effect.

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