@@ -17,45 +17,46 @@ React Component to lazy load images using a HOC to track window scroll position.
1717
1818## Installation
1919
20- 1 . Install react-lazy-load-image as a dependency:
20+ 1 . Install react-lazy-load-image-component as a dependency:
2121``` bash
2222# Yarn
23- $ yarn add react-lazy-load-image
23+ $ yarn add react-lazy-load-image-component
2424
2525# NPM
26- $ npm i --save react-lazy-load-image
26+ $ npm i --save react-lazy-load-image-component
2727```
28282 . Import the LazyLoadImage component:
2929``` javascript
30- import { LazyLoadImage } from ' react-lazy-load-image'
30+ import { LazyLoadImage } from ' react-lazy-load-image-component '
3131```
3232
33333 . Import the trackWindowScroll HOC:
3434``` javascript
35- import { trackWindowScroll } from ' react-lazy-load-image'
35+ import { trackWindowScroll } from ' react-lazy-load-image-component '
3636```
3737
3838
3939## Usage
4040
4141``` javascript
4242import React from ' react' ;
43- import { LazyLoadImage , trackWindowScroll } from ' react-lazy-load-image' ;
43+ import { LazyLoadImage , trackWindowScroll }
44+ from ' react-lazy-load-image-component' ;
4445
4546const Gallery = ({ images, scrollPosition }) => (
4647 < div>
4748 {images .map ((image ) =>
4849 < LazyLoadImage
4950 key= {image .key }
5051 height= {image .height }
51- scrollPosition= {scrollPosition} // pass the scrollPosition to the image
52+ scrollPosition= {scrollPosition} // pass the scrollPosition
5253 src= {image .src } // use normal <img> attributes as props
5354 width= {image .width } / >
5455 )}
5556 < / div>
5657);
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
5960export default trackWindowScroll (Gallery);
6061```
6162
@@ -73,4 +74,4 @@ export default trackWindowScroll(Gallery);
7374
7475## Screenshots
7576
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