@@ -17,45 +17,46 @@ React Component to lazy load images using a HOC to track window scroll position.
17
17
18
18
## Installation
19
19
20
- 1 . Install react-lazy-load-image as a dependency:
20
+ 1 . Install react-lazy-load-image-component as a dependency:
21
21
``` bash
22
22
# Yarn
23
- $ yarn add react-lazy-load-image
23
+ $ yarn add react-lazy-load-image-component
24
24
25
25
# NPM
26
- $ npm i --save react-lazy-load-image
26
+ $ npm i --save react-lazy-load-image-component
27
27
```
28
28
2 . Import the LazyLoadImage component:
29
29
``` javascript
30
- import { LazyLoadImage } from ' react-lazy-load-image'
30
+ import { LazyLoadImage } from ' react-lazy-load-image-component '
31
31
```
32
32
33
33
3 . Import the trackWindowScroll HOC:
34
34
``` javascript
35
- import { trackWindowScroll } from ' react-lazy-load-image'
35
+ import { trackWindowScroll } from ' react-lazy-load-image-component '
36
36
```
37
37
38
38
39
39
## Usage
40
40
41
41
``` javascript
42
42
import React from ' react' ;
43
- import { LazyLoadImage , trackWindowScroll } from ' react-lazy-load-image' ;
43
+ import { LazyLoadImage , trackWindowScroll }
44
+ from ' react-lazy-load-image-component' ;
44
45
45
46
const Gallery = ({ images, scrollPosition }) => (
46
47
< div>
47
48
{images .map ((image ) =>
48
49
< LazyLoadImage
49
50
key= {image .key }
50
51
height= {image .height }
51
- scrollPosition= {scrollPosition} // pass the scrollPosition to the image
52
+ scrollPosition= {scrollPosition} // pass the scrollPosition
52
53
src= {image .src } // use normal <img> attributes as props
53
54
width= {image .width } / >
54
55
)}
55
56
< / div>
56
57
);
57
- // Wrap Gallery with trackWindowScroll HOC so it receives a scrollPosition prop
58
- // to pass down to the images
58
+ // Wrap Gallery with trackWindowScroll HOC so it receives
59
+ // a scrollPosition prop to pass down to the images
59
60
export default trackWindowScroll (Gallery);
60
61
```
61
62
@@ -73,4 +74,4 @@ export default trackWindowScroll(Gallery);
73
74
74
75
## Screenshots
75
76
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 >
77
+ <a href =" https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component /master/screenshots/example.gif " ><img src =" https://raw.githubusercontent.com/Aljullu/react-lazy-load-image-component /master/screenshots/example.gif " alt =" " /></a >
0 commit comments