Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imbhargav5/react-lazy-progressive-image
React Progressive images with Lazy loading :zap:
https://github.com/imbhargav5/react-lazy-progressive-image
lazy-load-img progressive-image reactjs
Last synced: 5 days ago
JSON representation
React Progressive images with Lazy loading :zap:
- Host: GitHub
- URL: https://github.com/imbhargav5/react-lazy-progressive-image
- Owner: imbhargav5
- Archived: true
- Created: 2018-01-16T06:49:36.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-23T23:40:21.000Z (almost 4 years ago)
- Last Synced: 2024-10-14T06:51:44.843Z (21 days ago)
- Topics: lazy-load-img, progressive-image, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-lazy-progressive-image
- Size: 16.2 MB
- Stars: 45
- Watchers: 3
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-lazy-progressive-image
Load low resolution/ placeholder image first and then load the actual image lazily when it's in the viewport.
[](https://nodei.co/npm/react-lazy-progressive-image/)
[](https://www.npmjs.com/package/react-lazy-progressive-image)
[](https://www.npmjs.com/package/react-lazy-progressive-image)
# :zap: Why?
Load low resolution/ placeholder image first and then load the actual image lazily when it's in the viewport.
# :zap: Installation
The package is available on npm.
```bash
npm i -s react-lazy-progressive-image
```
# :zap: Usage
Just like `react-progressive-image` this component expects exactly one child which has to be a function.
```javascript
import React, { Component } from "react";
import LazyImage from "react-lazy-progressive-image";
class App extends Component {
render() {
return (
{(src, loading, isVisible) => 
}
);
}
}
```
The child which is a function will have access to `src`, `loading` and `isVisible` values as arguments and the user can decide how to use those values to render image styles. (This pattern is called render props or children props pattern)
| Render prop | Description | Type | Values |
| --------------------- | ------------------------------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------- |
| src | The src of the image being rendered | String | Initially points to the placeholder image, then loads image and will then point to the source image |
| loading | Whether the image is currently being loaded | Boolean | true/false |
| isVisible | Whether the image is currently visible in the page. This is managed by `react-visibility-sensor` | Boolean | true/false |
| visibilitySensorProps | Props to pass to `react-visibility-sensor` . Handy for `partialVisibility` | Object | `undefined` or `{}` |
### Example usage with styled-components
You can use `styled-components`, to transition an image from the placeholder when the image has loaded.
You can use the `render props` as mentioned above and then use it to animate the `opacity` of the image from `0.2` to `1` when the image is loaded. This is , of course, a basic example. But you can use this logic to create more powerful animations.
For eg :
```javascript
import React, { Component } from "react";
import styled from "styled-components";
import LazyImage from "react-lazy-progressive-image";
const Image = styled.img`
height: 450px;
width: 800px;
margin-top: 200px;
display: block;
transition: all 0.25s ease;
opacity: ${props => (props.loading ? 0.2 : 1)};
`;
class Usage extends Component {
render() {
return (
{(src, loading) => }
);
}
}
```
## How was this package made 🔧
A good amount of code has been taken from react-progressive-image, the additions being the usage of react-visibility-sensor to check if there is a need to load the image and making sure that the image doesn't load in advance when it's not really needed.
### ✊ Improvements in the roadmap
- [x] Unit tests
- [x] Integration tests
- [ ] Suspense integration
- [ ] More tests
## 🙏 Credits
1. Formidable Labs
2. Josh Johnston