From 5c26b5fb9b0fc8fb50ce646fa062ab8782831032 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Mon, 18 Jan 2016 11:49:33 +0300 Subject: [PATCH 1/8] V3 --- .../src/components/Application/index.jsx | 8 +- .../src/components/Application/style.css | 15 +- package.json | 18 +-- src/LazyLoad.jsx | 144 ++++++++++++------ src/utils/inView.js | 18 +++ src/utils/isHidden.js | 4 + 6 files changed, 138 insertions(+), 69 deletions(-) create mode 100644 src/utils/inView.js create mode 100644 src/utils/isHidden.js diff --git a/examples/basic/src/components/Application/index.jsx b/examples/basic/src/components/Application/index.jsx index 9304599..31d787a 100644 --- a/examples/basic/src/components/Application/index.jsx +++ b/examples/basic/src/components/Application/index.jsx @@ -9,19 +9,19 @@ class Application extends Component {
Scroll to load images.
- +
- +
- +
- +
diff --git a/examples/basic/src/components/Application/style.css b/examples/basic/src/components/Application/style.css index 4a3db81..d17d877 100644 --- a/examples/basic/src/components/Application/style.css +++ b/examples/basic/src/components/Application/style.css @@ -1,12 +1,13 @@ -.filler { - height: 300px; -} - -.lazy-load { +.LazyLoad { opacity: 0; transition: all 2s ease-in-out; + background-color: red; + + &.is-visible { + opacity: 1; + } } -.lazy-load-visible { - opacity: 1; +.filler { + height: 50px; } \ No newline at end of file diff --git a/package.json b/package.json index 1badcde..9fb3b5c 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,8 @@ { "name": "react-lazy-load", - "version": "2.0.2", - "description": "Simple lazy loading component built with react", - "main": "./lib/LazyLoad.js", - "scripts": { "build": "npm run build:lib && npm run build:umd && npm run build:umd:min", "build:lib": "babel src --out-dir lib", @@ -17,17 +13,14 @@ "prepublish": "npm run clean && npm run build", "test": "echo \"Error: no test specified\" && exit 1" }, - "repository": { "type": "git", "url": "https://github.com/loktar00/react-lazy-load.git" }, - "files": [ "dist", "lib" ], - "keywords": [ "react", "reactjs", @@ -35,15 +28,11 @@ "load", "lazy" ], - "author": "Jason Brown (https://twitter.com/loktar00)", - "contributors": [ "Sergey Laptev (https://twitter.com/iamsergeylaptev)" ], - "license": "MIT", - "devDependencies": { "babel-cli": "^6.3.17", "babel-core": "^6.2.1", @@ -60,13 +49,12 @@ "rimraf": "^2.4.4", "webpack": "^1.12.2" }, - "dependencies": { - "classnames": "^2.2.0" + "eventlistener": "0.0.1", + "lodash.debounce": "^4.0.0" }, - "peerDependencies": { "react": "^0.14.0", "react-dom": "^0.14.0" } -} \ No newline at end of file +} diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 69b5d20..079ef25 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -1,64 +1,98 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Children, Component, PropTypes } from 'react'; import { findDOMNode } from 'react-dom'; -import classNames from 'classnames'; -export default class LazyLoad extends Component { +import { add, remove } from 'eventlistener'; +import debounce from 'lodash.debounce'; + +import inView from './utils/inView'; + +class LazyLoad extends Component { constructor(props) { super(props); - this.onWindowScroll = this.onWindowScroll.bind(this); + + if (props.debounce) { + this.lazyLoadHandler = debounce(this.lazyLoadHandler, props.throttle).bind(this); + } else { + this.lazyLoadHandler = this.lazyLoadHandler.bind(this); + } + + this.state = { + visible: false, + }; } - state = { - visible: false, - }; - componentDidMount() { - window.addEventListener('scroll', this.onWindowScroll); - window.addEventListener('resize', this.onWindowScroll); - this.onWindowScroll(); + shouldComponentUpdate(_nextProps, nextState) { + return nextState.visible; } - componentDidUpdate() { - if (!this.state.visible) { - this.onWindowScroll(); - } else { - const { onContentVisible } = this.props; + componentDidMount() { + const eventNode = this.getEventNode(); - if (onContentVisible) { - onContentVisible(); - } - } + add(window, 'resize', this.lazyLoadHandler); + add(eventNode, 'scroll', this.lazyLoadHandler); } componentWillUnmount() { - this.onVisible(); + this.detachListeners(); } - onVisible() { - window.removeEventListener('scroll', this.onWindowScroll); - window.removeEventListener('resize', this.onWindowScroll); + getEventNode() { + return this.props.eventNode || window; } - onWindowScroll() { - const { threshold } = this.props; + getOffset() { + const { + offset, offsetVertical, offsetHorizontal, + offsetTop, offsetBottom, offsetLeft, offsetRight, + } = this.props; - const bounds = findDOMNode(this).getBoundingClientRect(); - const scrollTop = window.pageYOffset; - const top = bounds.top + scrollTop; - const height = bounds.bottom - bounds.top; + const _offsetAll = offset; + const _offsetVertical = offsetVertical || _offsetAll; + const _offsetHorizontal = offsetHorizontal || _offsetAll; + + return { + top: offsetTop || _offsetVertical, + bottom: offsetBottom || _offsetVertical, + left: offsetLeft || _offsetHorizontal, + right: offsetRight || _offsetHorizontal, + }; + } + lazyLoadHandler() { + const offset = this.getOffset(); + const node = findDOMNode(this); + const eventNode = this.getEventNode(); + const innerHeight = eventNode === window ? eventNode.innerHeight : eventNode.clientHeight; + const innerWidth = eventNode === window ? eventNode.innerWidth : eventNode.clientWidth; + + const view = { + left: 0 - offset.left, + top: 0 - offset.top, + bottom: innerHeight + offset.bottom, + right: innerWidth + offset.right, + }; + + if (inView(node, view)) { + const { onContentVisible } = this.props; - if (top === 0 || (top <= (scrollTop + window.innerHeight + threshold) - && (top + height) > (scrollTop - threshold))) { this.setState({ visible: true }); - this.onVisible(); + this.detachListeners(); + + if (onContentVisible) { + onContentVisible(); + } } } + detachListeners() { + const eventNode = this.getEventNode(); + + remove(window, 'resize', this.lazyLoadHandler); + remove(eventNode, 'scroll', this.lazyLoadHandler); + } render() { - const elStyles = { - height: this.props.height, - }; - const elClasses = classNames({ - 'lazy-load': true, - 'lazy-load-visible': this.state.visible, - }); + const { children, height, width } = this.props; + const { visible } = this.state; + + const elStyles = { height, width }; + const elClasses = 'LazyLoad' + (visible ? ' is-visible' : ''); return (
- {this.state.visible && this.props.children} + {visible && Children.only(children)}
); } @@ -66,13 +100,37 @@ export default class LazyLoad extends Component { LazyLoad.propTypes = { children: PropTypes.node.isRequired, + debounce: PropTypes.bool, + eventNode: PropTypes.any, height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), - threshold: PropTypes.number, + offset: PropTypes.number, + offsetBottom: PropTypes.number, + offsetHorizontal: PropTypes.number, + offsetLeft: PropTypes.number, + offsetRight: PropTypes.number, + offsetTop: PropTypes.number, + offsetVertical: PropTypes.number, onContentVisible: PropTypes.func, + throttle: PropTypes.number, + width: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), }; + LazyLoad.defaultProps = { - threshold: 0, + debounce: true, + offset: 0, + offsetBottom: 0, + offsetHorizontal: 0, + offsetLeft: 0, + offsetRight: 0, + offsetTop: 0, + offsetVertical: 0, + throttle: 250, }; + +export default LazyLoad; diff --git a/src/utils/inView.js b/src/utils/inView.js new file mode 100644 index 0000000..bbad4b1 --- /dev/null +++ b/src/utils/inView.js @@ -0,0 +1,18 @@ +import isHidden from './isHidden'; + +const inView = (element, view) => { + if (isHidden(element)) { + return false; + } + + const box = element.getBoundingClientRect(); + console.log(box, view); + return ( + box.right >= view.left && + box.bottom >= view.top && + box.left <= view.right && + box.top <= view.bottom + ); +}; + +export default inView; \ No newline at end of file diff --git a/src/utils/isHidden.js b/src/utils/isHidden.js new file mode 100644 index 0000000..812b560 --- /dev/null +++ b/src/utils/isHidden.js @@ -0,0 +1,4 @@ +const isHidden = (element) => + element.offsetParent === null; + +export default isHidden; \ No newline at end of file From f9a598f208ae9b4082b3f273a6701ee9896f8cf3 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Mon, 18 Jan 2016 12:22:10 +0300 Subject: [PATCH 2/8] Go back to using CommonJS modules --- src/LazyLoad.jsx | 15 ++++++++------- src/utils/inView.js | 9 +++------ src/utils/isHidden.js | 5 +---- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 079ef25..9c478d7 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -1,10 +1,11 @@ -import React, { Children, Component, PropTypes } from 'react'; -import { findDOMNode } from 'react-dom'; +const React = require('react'); +const { Children, Component, PropTypes } = React; +const { findDOMNode } = require('react-dom'); -import { add, remove } from 'eventlistener'; -import debounce from 'lodash.debounce'; +const { add, remove } = require('eventlistener'); +const debounce = require('lodash.debounce'); -import inView from './utils/inView'; +const inView = require('./utils/inView'); class LazyLoad extends Component { constructor(props) { @@ -23,7 +24,7 @@ class LazyLoad extends Component { shouldComponentUpdate(_nextProps, nextState) { return nextState.visible; } - componentDidMount() { + componentDidMount() { const eventNode = this.getEventNode(); add(window, 'resize', this.lazyLoadHandler); @@ -133,4 +134,4 @@ LazyLoad.defaultProps = { throttle: 250, }; -export default LazyLoad; +module.exports = LazyLoad; diff --git a/src/utils/inView.js b/src/utils/inView.js index bbad4b1..00d4695 100644 --- a/src/utils/inView.js +++ b/src/utils/inView.js @@ -1,18 +1,15 @@ -import isHidden from './isHidden'; +const isHidden = require('./isHidden'); -const inView = (element, view) => { +module.exports = (element, view) => { if (isHidden(element)) { return false; } const box = element.getBoundingClientRect(); - console.log(box, view); return ( box.right >= view.left && box.bottom >= view.top && box.left <= view.right && box.top <= view.bottom ); -}; - -export default inView; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/utils/isHidden.js b/src/utils/isHidden.js index 812b560..20da607 100644 --- a/src/utils/isHidden.js +++ b/src/utils/isHidden.js @@ -1,4 +1 @@ -const isHidden = (element) => - element.offsetParent === null; - -export default isHidden; \ No newline at end of file +module.exports = (element) => element.offsetParent === null; \ No newline at end of file From fc242b878cae26ea95f011ba7cbead73f9ebeac1 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Mon, 18 Jan 2016 12:34:15 +0300 Subject: [PATCH 3/8] Small refactor in accordance with eslint --- src/LazyLoad.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 9c478d7..8a4546f 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -21,15 +21,15 @@ class LazyLoad extends Component { visible: false, }; } - shouldComponentUpdate(_nextProps, nextState) { - return nextState.visible; - } componentDidMount() { const eventNode = this.getEventNode(); add(window, 'resize', this.lazyLoadHandler); add(eventNode, 'scroll', this.lazyLoadHandler); } + shouldComponentUpdate(_nextProps, nextState) { + return nextState.visible; + } componentWillUnmount() { this.detachListeners(); } @@ -114,12 +114,12 @@ LazyLoad.propTypes = { offsetRight: PropTypes.number, offsetTop: PropTypes.number, offsetVertical: PropTypes.number, - onContentVisible: PropTypes.func, throttle: PropTypes.number, width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), + onContentVisible: PropTypes.func, }; LazyLoad.defaultProps = { From 182a6ed04622e542a0b942ce6d6a2db687163470 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Sat, 23 Jan 2016 21:10:29 +0300 Subject: [PATCH 4/8] 3.0.0 release --- README.md | 106 ++++++++++++------ .../src/components/Application/index.jsx | 11 +- .../src/components/Application/style.css | 9 +- package.json | 2 +- src/LazyLoad.jsx | 28 ++--- src/utils/inView.js | 15 --- src/utils/inViewport.js | 44 ++++++++ src/utils/isHidden.js | 1 - src/utils/parentScroll.js | 31 +++++ 9 files changed, 176 insertions(+), 71 deletions(-) delete mode 100644 src/utils/inView.js create mode 100644 src/utils/inViewport.js delete mode 100644 src/utils/isHidden.js create mode 100644 src/utils/parentScroll.js diff --git a/README.md b/README.md index e2df610..ef772e0 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ React Lazy Load Component ========================= -Really simple component that renders children elements when they enter the viewport. +React Lazy Load is easy to use React component which helps you defer loading content in predictable way. It's fast, works in IE8+, 6KB minified and uses debounce function by default. You can also use component inside scrolling container, such as div with scrollbar. It will be found automatically. Check out an example. [![build status](https://img.shields.io/travis/loktar00/react-lazy-load.svg?style=flat-square)](https://travis-ci.org/loktar00/react-lazy-load) [![dependency status](https://david-dm.org/loktar00/react-lazy-load.svg?style=flat-square)](https://david-dm.org/loktar00/react-lazy-load) @@ -20,48 +20,90 @@ npm install --save react-lazy-load ## Usage ```jsx -import React, { Component } from 'react'; +import React from 'react'; import LazyLoad from 'react-lazy-load'; -class MyComponent extends Component { - render() { - return ( - -
some content
- - ); - } -} +const MyComponent = () => ( +
+ Scroll to load images. +
+ + + +
+ + + +
+ + + +
+ console.log('look ma I've been lazyloaded!')} + > + + +
+
+); ``` ## Props -### height={String|Number} +#### offset +Type: `Number|String` Default: `0` +Aliases: `threshold` -This is used to set the elements height even when it contains no content. +The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. -```jsx - -
some content
- -``` +#### offsetVertical +Type: `Number|String` Default: `offset`'s value -### threshold={Number} +The `offsetVertical` option allows you to specify how far above and below the viewport you want to _begin_ displaying your content. -By default content is loaded when it appears on the screen. If you want content to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport. +#### offsetHorizontal +Type: `Number|String` Default: `offset`'s value -```jsx - -
some content
- -``` +The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want to _begin_ displaying your contet. -### onContentVisible={Function} +#### offsetTop +Type: `Number|String` Default: `offsetVertical`'s value -A callback function to execute when the content appears on the screen. +The `offsetTop` option allows you to specify how far above the viewport you want to _begin_ displaying your content. -```jsx - { console.log('content visible'); }}> -
some content
- -``` +#### offsetBottom +Type: `Number|String` Default: `offsetVertical`'s value + +The `offsetBottom` option allows you to specify how far below the viewport you want to _begin_ displaying your content. + +#### offsetLeft +Type: `Number|String` Default: `offsetVertical`'s value + +The `offsetLeft` option allows you to specify how far to left of the viewport you want to _begin_ displaying your content. + +#### offsetRight +Type: `Number|String` Default: `offsetVertical`'s value + +The `offsetRight` option allows you to specify how far to the right of the viewport you want to _begin_ displaying your content. + +#### throttle +Type: `Number|String` Default: `250` + +The throttle is managed by an internal function that prevents performance issues from continuous firing of `scroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds. + +#### debounce +Type: `Boolean` Default: `true` + +By default the throttling function is actually a [debounce](https://lodash.com/docs#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the loadable content every `throttle` milliseconds, set `debounce` to `false`. + +### height +Type: `String|Number` Default: `100` + +This is used to set the elements height even when it has no content. + +### onContentVisible +Type `Function` + +A callback function to execute when the content appears on the screen. \ No newline at end of file diff --git a/examples/basic/src/components/Application/index.jsx b/examples/basic/src/components/Application/index.jsx index 31d787a..7552e3e 100644 --- a/examples/basic/src/components/Application/index.jsx +++ b/examples/basic/src/components/Application/index.jsx @@ -17,9 +17,14 @@ class Application extends Component {
- - - +
+
+
+
+ + + +
diff --git a/examples/basic/src/components/Application/style.css b/examples/basic/src/components/Application/style.css index d17d877..7f1bf1f 100644 --- a/examples/basic/src/components/Application/style.css +++ b/examples/basic/src/components/Application/style.css @@ -1,7 +1,6 @@ .LazyLoad { opacity: 0; transition: all 2s ease-in-out; - background-color: red; &.is-visible { opacity: 1; @@ -9,5 +8,11 @@ } .filler { - height: 50px; + height: 150px; +} + +.ScrollableContainer { + height: 200px; + overflow: scroll; + background-color: grey; } \ No newline at end of file diff --git a/package.json b/package.json index 9fb3b5c..90d0f45 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-lazy-load", - "version": "2.0.2", + "version": "3.0.0", "description": "Simple lazy loading component built with react", "main": "./lib/LazyLoad.js", "scripts": { diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 8a4546f..2287bd9 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -1,11 +1,12 @@ const React = require('react'); -const { Children, Component, PropTypes } = React; const { findDOMNode } = require('react-dom'); +const { Children, Component, PropTypes } = React; const { add, remove } = require('eventlistener'); const debounce = require('lodash.debounce'); -const inView = require('./utils/inView'); +const parentScroll = require('./utils/parentScroll'); +const inViewport = require('./utils/inViewport'); class LazyLoad extends Component { constructor(props) { @@ -24,6 +25,8 @@ class LazyLoad extends Component { componentDidMount() { const eventNode = this.getEventNode(); + this.lazyLoadHandler(); + add(window, 'resize', this.lazyLoadHandler); add(eventNode, 'scroll', this.lazyLoadHandler); } @@ -34,15 +37,15 @@ class LazyLoad extends Component { this.detachListeners(); } getEventNode() { - return this.props.eventNode || window; + return parentScroll(findDOMNode(this)); } getOffset() { const { offset, offsetVertical, offsetHorizontal, - offsetTop, offsetBottom, offsetLeft, offsetRight, + offsetTop, offsetBottom, offsetLeft, offsetRight, threshold, } = this.props; - const _offsetAll = offset; + const _offsetAll = threshold || offset; const _offsetVertical = offsetVertical || _offsetAll; const _offsetHorizontal = offsetHorizontal || _offsetAll; @@ -57,17 +60,8 @@ class LazyLoad extends Component { const offset = this.getOffset(); const node = findDOMNode(this); const eventNode = this.getEventNode(); - const innerHeight = eventNode === window ? eventNode.innerHeight : eventNode.clientHeight; - const innerWidth = eventNode === window ? eventNode.innerWidth : eventNode.clientWidth; - - const view = { - left: 0 - offset.left, - top: 0 - offset.top, - bottom: innerHeight + offset.bottom, - right: innerWidth + offset.right, - }; - if (inView(node, view)) { + if (inViewport(node, eventNode, offset)) { const { onContentVisible } = this.props; this.setState({ visible: true }); @@ -102,7 +96,6 @@ class LazyLoad extends Component { LazyLoad.propTypes = { children: PropTypes.node.isRequired, debounce: PropTypes.bool, - eventNode: PropTypes.any, height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, @@ -114,6 +107,7 @@ LazyLoad.propTypes = { offsetRight: PropTypes.number, offsetTop: PropTypes.number, offsetVertical: PropTypes.number, + threshold: PropTypes.number, throttle: PropTypes.number, width: PropTypes.oneOfType([ PropTypes.string, @@ -134,4 +128,4 @@ LazyLoad.defaultProps = { throttle: 250, }; -module.exports = LazyLoad; +module.exports = LazyLoad; \ No newline at end of file diff --git a/src/utils/inView.js b/src/utils/inView.js deleted file mode 100644 index 00d4695..0000000 --- a/src/utils/inView.js +++ /dev/null @@ -1,15 +0,0 @@ -const isHidden = require('./isHidden'); - -module.exports = (element, view) => { - if (isHidden(element)) { - return false; - } - - const box = element.getBoundingClientRect(); - return ( - box.right >= view.left && - box.bottom >= view.top && - box.left <= view.right && - box.top <= view.bottom - ); -}; \ No newline at end of file diff --git a/src/utils/inViewport.js b/src/utils/inViewport.js new file mode 100644 index 0000000..fe532d2 --- /dev/null +++ b/src/utils/inViewport.js @@ -0,0 +1,44 @@ +const isHidden = (element) => + element.offsetParent === null; + +const offset = (element) => { + const rect = element.getBoundingClientRect(); + + return { + top: rect.top + window.pageYOffset, + left: rect.left + window.pageXOffset, + }; +}; + +const inViewport = (element, container, customOffset) => { + if (isHidden(element)) { + return false; + } + + let top, left, bottom, right; + + if (typeof container === 'undefined' || container === window) { + top = window.pageYOffset; + left = window.pageXOffset; + bottom = top + window.innerHeight; + right = left + window.innerWidth; + } else { + const containerOffset = offset(container); + + top = containerOffset.top; + left = containerOffset.left; + bottom = top + container.offsetHeight; + right = left + container.offsetWidth; + } + + const elementOffset = offset(element); + + return ( + top < elementOffset.top + customOffset.bottom + element.offsetHeight && + bottom > elementOffset.top - customOffset.top && + left < elementOffset.left + customOffset.right + element.offsetWidth && + right > elementOffset.left - customOffset.left + ); +}; + +module.exports = inViewport; \ No newline at end of file diff --git a/src/utils/isHidden.js b/src/utils/isHidden.js deleted file mode 100644 index 20da607..0000000 --- a/src/utils/isHidden.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = (element) => element.offsetParent === null; \ No newline at end of file diff --git a/src/utils/parentScroll.js b/src/utils/parentScroll.js new file mode 100644 index 0000000..d82bdc3 --- /dev/null +++ b/src/utils/parentScroll.js @@ -0,0 +1,31 @@ +const style = (element, prop) => + typeof getComputedStyle !== 'undefined' + ? getComputedStyle(element, null).getPropertyValue(prop) + : element.style[prop]; + +const overflow = (element) => + style(element, 'overflow') + style(element, 'overflow-y') + style(element, 'overflow-x'); + +const scrollParent = (element) => { + if (!(element instanceof HTMLElement)) { + return window; + } + + let parent = element; + + while(parent) { + if (!parent.parentNode) { + return window; + } + + if (/(scroll|auto)/.test(overflow(parent))) { + return parent; + } + + parent = parent.parentNode; + } + + return window; +}; + +module.exports = scrollParent; \ No newline at end of file From 3a0c4fe6887631375751ea9f89a3cfa3e283c159 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Sat, 23 Jan 2016 21:13:44 +0300 Subject: [PATCH 5/8] Fix readme type --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ef772e0..e5dd456 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ const MyComponent = () => (
console.log('look ma I've been lazyloaded!')} + onContentVisible={() => console.log('look ma I have been lazyloaded!')} > From 9e004ed0974b185ae028cf3605b8920c4a1dd737 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Sat, 23 Jan 2016 21:14:27 +0300 Subject: [PATCH 6/8] Small readme enhancements --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e5dd456..8c6c425 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ const MyComponent = () => ( #### offset Type: `Number|String` Default: `0` + Aliases: `threshold` The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. From 15fc661341cc9998aad0e1bfa8d226cfcd499238 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Sat, 23 Jan 2016 21:15:09 +0300 Subject: [PATCH 7/8] Fix linting errors --- src/LazyLoad.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 2287bd9..3a0aeb2 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -128,4 +128,4 @@ LazyLoad.defaultProps = { throttle: 250, }; -module.exports = LazyLoad; \ No newline at end of file +module.exports = LazyLoad; From 00bc890a1f6ceee90f82b4cf446ac602165228c4 Mon Sep 17 00:00:00 2001 From: Sergey Laptev Date: Sat, 23 Jan 2016 21:16:22 +0300 Subject: [PATCH 8/8] Add default height value --- src/LazyLoad.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/LazyLoad.jsx b/src/LazyLoad.jsx index 3a0aeb2..42835f7 100644 --- a/src/LazyLoad.jsx +++ b/src/LazyLoad.jsx @@ -118,6 +118,7 @@ LazyLoad.propTypes = { LazyLoad.defaultProps = { debounce: true, + height: 100, offset: 0, offsetBottom: 0, offsetHorizontal: 0,