lazy-react 3.0.2 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -12
- package/demo/index.html +1 -0
- package/demo/index.js +23 -44
- package/dist/index.js +1 -2
- package/package.json +9 -11
- package/src/{index.js → index.tsx} +1 -0
- package/src/lazyLoadBackgroundImage.tsx +30 -0
- package/src/lazyLoadComponent.tsx +22 -0
- package/src/lazyLoadFrame.tsx +21 -0
- package/src/lazyLoadImage.tsx +21 -0
- package/src/useIsInViewport.tsx +118 -0
- package/tsconfig.json +25 -0
- package/webpack.config.demo.js +1 -1
- package/webpack.config.js +15 -48
- package/.babelrc +0 -6
- package/dist/index.js.map +0 -1
- package/src/baseClass.js +0 -107
- package/src/lazyLoadBackgroundImage.js +0 -20
- package/src/lazyLoadComponent.js +0 -24
- package/src/lazyLoadFrame.js +0 -20
- package/src/lazyLoadImage.js +0 -17
package/README.md
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
# lazy-react
|
|
2
2
|
|
|
3
|
-
[](https://badge.fury.io/js/lazy-react) [](https://codeclimate.com/github/jonathanobino/react-lazy) [](https://github.com/prettier/prettier)
|
|
4
|
-
|
|
3
|
+
[](https://badge.fury.io/js/lazy-react) [](https://codeclimate.com/github/jonathanobino/react-lazy) [](https://github.com/prettier/prettier)
|
|
5
4
|
|
|
6
5
|
Utility components to lazy load images, images-as-background and iframes using only requestAnimationFrame to handle scroll (both vertical and orizzontal) and window resize.
|
|
7
6
|
|
|
8
7
|
## Install
|
|
9
8
|
|
|
10
|
-
`npm install --save lazy-react`
|
|
9
|
+
`npm install --save lazy-react`
|
|
11
10
|
|
|
12
|
-
Also available as umd on [unpkg](https://unpkg.com/lazy-react)
|
|
11
|
+
Also available as umd on [unpkg](https://unpkg.com/lazy-react)
|
|
13
12
|
|
|
14
13
|
`<script src="https://unpkg.com/lazy-react"></script>`
|
|
15
14
|
|
|
@@ -19,11 +18,12 @@ You can see a demo of those packages in my [personal site](http://jonathanobino.
|
|
|
19
18
|
|
|
20
19
|
## Usage
|
|
21
20
|
|
|
22
|
-
The package exports
|
|
21
|
+
The package exports 4 components:
|
|
23
22
|
|
|
24
23
|
- LazyBackgroundImage
|
|
25
24
|
- LazyImage
|
|
26
25
|
- LazyFrame
|
|
26
|
+
- LazyComponent
|
|
27
27
|
|
|
28
28
|
Every component accepts **offeset** as a prop, with 100px as fallback.
|
|
29
29
|
|
|
@@ -46,6 +46,17 @@ Name | Type | Description | Required | Default
|
|
|
46
46
|
className | String | html class attribute | | empty string
|
|
47
47
|
style | Object | html style attribute | | {} |
|
|
48
48
|
|
|
49
|
+
This component is used to have a div placeholder before loading the component.
|
|
50
|
+
|
|
51
|
+
Usage:
|
|
52
|
+
```javascript
|
|
53
|
+
|
|
54
|
+
<LazyComponent>
|
|
55
|
+
<ComponentToLoadWhenInViewport>
|
|
56
|
+
</LazyComponent>
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
|
|
49
60
|
### LazyImage
|
|
50
61
|
|
|
51
62
|
#### Props
|
|
@@ -79,11 +90,12 @@ style | Object | html style attribute | | {width:'100%'}
|
|
|
79
90
|
|
|
80
91
|
```javascript
|
|
81
92
|
//with es6
|
|
82
|
-
import {LazyBackgroundImage, LazyImage, LazyFrame} from 'lazy-react'
|
|
93
|
+
import {LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent} from 'lazy-react'
|
|
83
94
|
//with es5
|
|
84
95
|
var LazyBackgroundImage = require('lazy-react').LazyBackgroundImage
|
|
85
96
|
var LazyImage = require('lazy-react').LazyImage
|
|
86
97
|
var LazyFrame = require('lazy-react').LazyFrame
|
|
98
|
+
var LazyComponent = require('lazy-react').LazyComponent
|
|
87
99
|
|
|
88
100
|
class Example extends React.Component {
|
|
89
101
|
constructor(props) {
|
|
@@ -91,23 +103,63 @@ class Example extends React.Component {
|
|
|
91
103
|
}
|
|
92
104
|
render() {
|
|
93
105
|
return <div>
|
|
94
|
-
<LazyBackgroundImage
|
|
95
|
-
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
106
|
+
<LazyBackgroundImage
|
|
107
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
96
108
|
className="fill"
|
|
97
109
|
/>
|
|
98
|
-
<LazyImage
|
|
99
|
-
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
110
|
+
<LazyImage
|
|
111
|
+
link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
|
|
100
112
|
offset={100}
|
|
101
113
|
/>
|
|
102
|
-
<LazyFrame
|
|
103
|
-
link={'http://jonathanobino.xyz'}
|
|
114
|
+
<LazyFrame
|
|
115
|
+
link={'http://jonathanobino.xyz'}
|
|
104
116
|
scrolling={true}
|
|
105
117
|
/>
|
|
118
|
+
<LazyComponent>
|
|
119
|
+
<ComponentToLoadWhenInViewport>
|
|
120
|
+
</LazyComponent>
|
|
106
121
|
</div>
|
|
107
122
|
}
|
|
108
123
|
}
|
|
109
124
|
```
|
|
110
125
|
|
|
126
|
+
## Hook
|
|
127
|
+
|
|
128
|
+
Since version 3.x there is an hook available named 'useIsInViewport' that exposes 3 elements:
|
|
129
|
+
|
|
130
|
+
- setRef: used to set the ref of the dom that has to be in the viewport
|
|
131
|
+
- link: the passed link. It's equal to '' until the element is in the specified viewport
|
|
132
|
+
- isVisible: it's false until the element is in the specified viewport
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
Usage
|
|
136
|
+
|
|
137
|
+
```javascript
|
|
138
|
+
|
|
139
|
+
import useIsInViewport from 'lazy-react'
|
|
140
|
+
|
|
141
|
+
function Example(props) {
|
|
142
|
+
const [setRef, link, isVisible] = useIsInViewport(props)
|
|
143
|
+
|
|
144
|
+
if(!isVisible){
|
|
145
|
+
return <Placeholder />
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return <div ref={(node)=>{
|
|
149
|
+
setRef(node)
|
|
150
|
+
}}>
|
|
151
|
+
<Content/>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
The required props that have to be passed to the hooks are:
|
|
159
|
+
|
|
160
|
+
- link: string
|
|
161
|
+
- offset: number
|
|
162
|
+
|
|
111
163
|
## Contributing
|
|
112
164
|
|
|
113
165
|
Pull requests for bug fixes, new features, and improvements are welcomed.
|