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