https://github.com/magicoder10/react-progressive-image

Progressive image loading component for React
https://github.com/magicoder10/react-progressive-image

javascript-library progressive-image progressive-image-loading react reactjs

Last synced: 9 days ago
JSON representation

Progressive image loading component for React

• Host: GitHub
• URL: https://github.com/magicoder10/react-progressive-image
• Owner: magicoder10
• Created: 2019-02-13T08:49:26.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-23T19:51:23.000Z (over 5 years ago)
• Last Synced: 2024-05-27T22:36:40.738Z (6 months ago)
• Topics: javascript-library, progressive-image, progressive-image-loading, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 16.3 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Progressive Image

Progressive image loading component for React

[![Build Status](https://travis-ci.com/byliuyang/react-progressive-image.svg?branch=master)](https://travis-ci.com/byliuyang/react-progressive-image)

## Preview

![Progressive Image Loading](screenshots/1.gif)

## Features

- Lazy load image when it's visible in the viewport

- Progressively load image with animation

## Future plan

- [In Progress] Build a website to help people generate thumbnail from the original image.

- Provide hosting service for both image assets.

- Generate React & Angular progressive image loading code based on the hosted URLs.

## Usage

Install npm package

```

yarn add @time4hacks/react-progressive-image

```

Import `Progressive Image Component`, `BrowserImageLoader`, and `BrowserViewport`:

```typescript

import {

	ProgressiveImage, 

	BrowserImageLoader, 

	BrowserViewport

} from '@time4hacks/react-progressive-image';

```

Initialize Viewport and ImageLoader

```typescript

const imageLoader = new BrowserImageLoader();

const viewport = new BrowserViewport();

```

Add progressive image to your app:

```typescript

```

Replace `photoThumbnail` with the URL of thumbnail and `photo` with the URL of full resolution image. 

Please remember to update `alt` to improve accessibility.

## Development

Install library dependencies

```

yarn

```

Start library live re-bundle server

```

yarn start

```

Install example dependencies and link library

```

cd example

yarn

```

Start live reload web server

```

yarn start

```

## Testing

### Running unit tests

```

yarn test

```

## Author

- **Harry Liu** - *Initial work* - [byliuyang](https://github.com/byliuyang)

## License

This library is maintained under the MIT License.