Skip to content

Commit 290067b

Browse files
committed
Update README
1 parent 1f7d24b commit 290067b

File tree

2 files changed

+72
-0
lines changed

2 files changed

+72
-0
lines changed

README.md

+72
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,75 @@ React Lazy Load Image
22
=====================
33

44
React Component to lazy load images using a HOC to track window scroll position.
5+
6+
7+
## Features
8+
9+
* Two components: a HOC to track the scroll position and a component to render the image.
10+
* Handles scroll events, resize events and re-renders that might change the position of the components.
11+
* Placeholder by default with the same size of the image.
12+
* A custom placeholder and threshold can be specified.
13+
* `beforeLoad` and `afterLoad` events.
14+
* Accepts all standard `<img>` attributes.
15+
* No dependencies other than `react`.
16+
17+
18+
## Installation
19+
20+
1. Install react-lazy-load-image as a dependency:
21+
```bash
22+
# Yarn
23+
$ yarn add react-lazy-load-image
24+
25+
# NPM
26+
$ npm i --save react-lazy-load-image
27+
```
28+
2. Import the LazyLoadImage component:
29+
```javascript
30+
import { LazyLoadImage } from 'react-lazy-load-image'
31+
```
32+
33+
3. Import the trackWindowScroll HOC:
34+
```javascript
35+
import { trackWindowScroll } from 'react-lazy-load-image'
36+
```
37+
38+
39+
## Usage
40+
41+
```javascript
42+
import React from 'react';
43+
import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image';
44+
45+
const Gallery = ({ images, scrollPosition }) => (
46+
<div>
47+
{images.map((image) =>
48+
<LazyLoadImage
49+
key={image.key}
50+
height={image.height}
51+
scrollPosition={scrollPosition} // pass the scrollPosition to the image
52+
src={image.src} // use normal <img> attributes as props
53+
width={image.width} />
54+
)}
55+
</div>
56+
);
57+
// Wrap Gallery with trackWindowScroll HOC so it receives a scrollPosition prop
58+
// to pass down to the images
59+
export default trackWindowScroll(Gallery);
60+
```
61+
62+
## Props
63+
64+
| Prop | Type | Description |
65+
|:---|:---|:---|
66+
| scrollPosition | `Object` | Object containing `x` and `y` with the curent window scroll position. Required. |
67+
| afterLoad | `Function` | Function called after the image has been rendered. |
68+
| beforeLoad | `Function` | Function called right before the image is rendered. |
69+
| placeholder | `ReactClass` | A React element to use as a placeholder. |
70+
| threshold | `Number` | Threshold in pixels. So the image starts loading before it appears in the viewport. _Defaults to 100._ |
71+
| ... | | Any other image attribute |
72+
73+
74+
## Screenshots
75+
76+
<a href="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif"><img src="https://raw.githubusercontent.com/Aljullu/react-lazy-load-image/master/screenshots/example.gif" alt="" /></a>

screenshots/example.gif

1.55 MB
Loading

0 commit comments

Comments
 (0)