@@ -2,3 +2,75 @@ React Lazy Load Image
22=====================
33
44React 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 >
0 commit comments