New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lazyload - npm Package Compare versions

Comparing version

0.1.0
to
0.1.1

37

lib/index.js

@@ -25,3 +25,10 @@ /**

var listeners = [];
var pending = [];
/**
* Detect if element is visible in viewport, if so, set `visible` state to true.
* If `once` prop is provided true, remove component as listener after checkVisible
*
* @param {React} component React component that respond to scroll and resize
*/
var checkVisible = function checkVisible(component) {

@@ -42,4 +49,5 @@ var node = _reactAddons2['default'].findDOMNode(component);

var elementHeight = bottom - top;
var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
if (elementTop < scrollTop + window.innerHeight && elementTop + elementHeight > scrollTop) {
if (elementTop < scrollTop + windowInnerHeight && elementTop + elementHeight > scrollTop) {
component.setState({

@@ -50,11 +58,30 @@ visible: true

if (component.props.once) {
listeners.splice(listeners.indexOf(component), 1);
pending.push(component);
}
} else if (component.state.visible) {
component.setState({
visible: false
});
}
};
var purgePending = function purgePending() {
pending.forEach(function (component) {
var index = listeners.indexOf(component);
if (index !== -1) {
listeners.splice(index, 1);
}
});
pending = [];
};
var lazyLoadHandler = _utilsDebounce2['default'](function () {
listeners.forEach(function (listener) {
for (var i = 0; i < listeners.length; ++i) {
var listener = listeners[i];
checkVisible(listener);
});
}
// Remove `once` component in listeners
purgePending();
}, 300);

@@ -98,3 +125,3 @@

LazyLoad.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return nextState.visible || this.state.visible;
return nextState.visible;
};

@@ -101,0 +128,0 @@

2

package.json
{
"name": "react-lazyload",
"version": "0.1.0",
"version": "0.1.1",
"description": "Lazyload your Component, Image or anything matters the performance.",

@@ -5,0 +5,0 @@ "main": "lib/index.js",

23

README.md

@@ -1,7 +0,5 @@

# react-lazyload
# react-lazyload [![npm version](https://badge.fury.io/js/react-lazyload.svg)](http://badge.fury.io/js/react-lazyload)
Lazyload your Component, Image or anything matters the performance.
Lazyload your Components, Images or anything matters the performance.
**Work in progress, use at your own risk!!**
[Online Demo](//jasonslyvia.github.io/react-lazyload/examples/)

@@ -15,2 +13,8 @@

## Who should use it
Let's say there is a `fixed` date picker on the page, when user pick a different date, all components displaying data should send ajax request with new date parameter to retreive updated data, even many of them aren't visible in viewport. This makes server load furious when there are too many requests in one page.
Using `LazyLoad` component will help ease this situation by only update components in viewport.
## Usage

@@ -33,3 +37,6 @@

</LazyLoad>
<LazyLoad>
<LazyLoad once > /* Once this component is loaded, LazyLoad will
not care about it anymore, stuff like images
should add `once` props to reduce listeners for
scroll/resize event and improve performance */
<MyComponent />

@@ -53,7 +60,7 @@ </LazyLoad>

### Once
### once
Type: Bool Default: false
Once the lazy loaded component is mounted, do not detect scroll/resize event anymore. Useful for images or simple components.
Once the lazy loaded component is loaded, do not detect scroll/resize event anymore. Useful for images or simple components.

@@ -63,3 +70,3 @@ ## Scripts

```
$ npm run demo
$ npm run demo:watch
$ npm run build

@@ -66,0 +73,0 @@ ```

37

src/index.js

@@ -10,3 +10,10 @@ /**

const listeners = [];
let pending = [];
/**
* Detect if element is visible in viewport, if so, set `visible` state to true.
* If `once` prop is provided true, remove component as listener after checkVisible
*
* @param {React} component React component that respond to scroll and resize
*/
const checkVisible = function(component) {

@@ -35,11 +42,33 @@ const node = React.findDOMNode(component);

if (component.props.once) {
listeners.splice(listeners.indexOf(component), 1);
pending.push(component);
}
}
else if (component.state.visible) {
component.setState({
visible: false
});
}
};
const purgePending = function() {
pending.forEach(component => {
const index = listeners.indexOf(component);
if (index !== -1) {
listeners.splice(index, 1);
}
});
pending = [];
};
const lazyLoadHandler = debounce(() => {
listeners.forEach(listener => {
for(let i = 0; i < listeners.length; ++i) {
const listener = listeners[i];
checkVisible(listener);
});
}
// Remove `once` component in listeners
purgePending();
}, 300);

@@ -80,3 +109,3 @@

shouldComponentUpdate(nextProps, nextState) {
return nextState.visible || this.state.visible;
return nextState.visible;
}

@@ -83,0 +112,0 @@

36

webpack.config.js

@@ -31,21 +31,27 @@ 'use strict';

var entry = [
var entry = DEV_MODE ? [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./examples/app.js'
].concat(DEV_MODE ? [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server'
] : []);
] : [
'./examples/app.js'
];
var loaders = DEV_MODE ? [{
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
}, {
test: /\.jsx?$/,
loader: 'babel?stage=0&loose=all',
exclude: /node_modules/
}] : [{
test: /\.jsx?$/,
loader: 'babel?stage=0&loose=all',
exclude: /node_modules/
}];
module.exports = {
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel?stage=0&loose=all',
exclude: /node_modules/
}].concat(DEV_MODE ? [{
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
}] : [])
loaders: loaders
},

@@ -57,3 +63,3 @@

debug: DEV_MODE,
devtool: DEV_MODE ? '#inline-source-map' : false,
devtool: DEV_MODE ? 'inline-source-map' : false,

@@ -60,0 +66,0 @@ output: {