@@ -15,17 +15,21 @@ $ npm install react-progressive-image-loading --save
15
15
## Usage
16
16
17
17
``` jsx
18
- < ProgressiveImage preview= " /images/tiny-preview.png" src= " /images/preview.png" >
19
- {(src , style ) => < img src= {src} style= {style} / > }
20
- < / ProgressiveImage>
18
+ < ProgressiveImage
19
+ preview= " /images/tiny-preview.png"
20
+ src= " /images/preview.png"
21
+ render= {(src , style ) => < img src= {src} style= {style} / > }
22
+ / >
21
23
```
22
24
23
25
Instead of using the ` img ` tag, you can use ` background-image ` with a ` div ` .
24
26
25
27
``` jsx
26
- < ProgressiveImage preview= " /images/tiny-preview.png" src= " /images/preview.png" >
27
- {(src , style ) => < div style= {Object .assign (style, { backgroundImage: ` url(${ src} )` })} / > }
28
- < / ProgressiveImage>
28
+ < ProgressiveImage
29
+ preview= " /images/tiny-preview.png"
30
+ src= " /images/preview.png"
31
+ render= {(src , style ) => < div style= {Object .assign (style, { backgroundImage: ` url(${ src} )` })} / > }
32
+ / >
29
33
```
30
34
31
35
You can also customize the transition time and the timing function used for that transition.
@@ -35,16 +39,7 @@ You can also customize the transition time and the timing function used for that
35
39
preview= " /images/tiny-preview.png"
36
40
src= " /images/preview.png"
37
41
transitionTime= {500 }
38
- transitionFunction= " ease" >
39
- {(src , style ) => < img src= {src} style= {style} / > }
40
- < / ProgressiveImage>
41
- ```
42
-
43
- In case of ` background=true ` , it is possible to add some layers on top of the background image, for instance:
44
-
45
- ``` jsx
46
- < ProgressiveImage
47
- preview= " /images/tiny-preview.png" src= " /images/preview.png" background= {true }
48
- backgroundImages= {[" linear-gradient(to top, rgba(31,31,31,0.3), rgba(31,31,31,0.3))" ]}
42
+ transitionFunction= " ease"
43
+ render= {(src , style ) => < img src= {src} style= {style} / > }
49
44
/ >
50
45
```
0 commit comments