lazy-react 3.1.0 → 3.3.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 +38 -2
- 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 +119 -0
- package/tsconfig.json +25 -0
- package/webpack.config.demo.js +1 -1
- package/webpack.config.js +27 -37
- package/.babelrc +0 -6
- package/dist/index.js.map +0 -1
- package/src/baseClass.js +0 -107
- package/src/lazyLoadBackgroundImage.js +0 -24
- package/src/lazyLoadComponent.js +0 -24
- package/src/lazyLoadFrame.js +0 -20
- package/src/lazyLoadImage.js +0 -17
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
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
|
|
|
@@ -124,6 +123,43 @@ class Example extends React.Component {
|
|
|
124
123
|
}
|
|
125
124
|
```
|
|
126
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
|
+
|
|
127
163
|
## Contributing
|
|
128
164
|
|
|
129
165
|
Pull requests for bug fixes, new features, and improvements are welcomed.
|