Skip to content

Commit

Permalink
Merge pull request #41 from loktar00/v3
Browse files Browse the repository at this point in the history 
Huge 3.0.0 release
  • Loading branch information
@sergeylaptev
sergeylaptev committed Jan 23, 2016
2 parents c13a25c + 00bc890 commit 1adb8d9
Show file tree
Hide file tree
Showing 7 changed files with 275 additions and 104 deletions.
107 changes: 75 additions & 32 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -20,48 +20,91 @@ 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 (
<LazyLoad>
<div>some content</div>
</LazyLoad>
);
}
}
const MyComponent = () => (
<div>
Scroll to load images.
<div className="filler" />
<LazyLoad height={762} offsetVertical={300}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={683} offsetTop={200}>
<img src='http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={480} offsetHorizontal={50}>
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' />
</LazyLoad>
<div className="filler" />
<LazyLoad
height={720}
onContentVisible={() => console.log('look ma I have been lazyloaded!')}
>
<img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' />
</LazyLoad>
<div className="filler" />
</div>
);
```

## Props

### height={String|Number}
#### offset
Type: `Number|String` Default: `0`

This is used to set the elements height even when it contains no content.
Aliases: `threshold`

```jsx
<LazyLoad height={100}>
<div>some content</div>
</LazyLoad>
```
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`.

### threshold={Number}
#### offsetVertical
Type: `Number|String` Default: `offset`'s value

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.
The `offsetVertical` option allows you to specify how far above and below the viewport you want to _begin_ displaying your content.

```jsx
<LazyLoad threshold={200}>
<div>some content</div>
</LazyLoad>
```
#### offsetHorizontal
Type: `Number|String` Default: `offset`'s value

### onContentVisible={Function}
The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want to _begin_ displaying your contet.

A callback function to execute when the content appears on the screen.
#### offsetTop
Type: `Number|String` Default: `offsetVertical`'s value

```jsx
<LazyLoad onContentVisible={() => { console.log('content visible'); }}>
<div>some content</div>
</LazyLoad>
```
The `offsetTop` option allows you to specify how far above the viewport you want to _begin_ displaying your 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.
17 changes: 11 additions & 6 deletions examples/basic/src/components/Application/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,24 @@ class Application extends Component {
<div>
Scroll to load images.
<div className="filler" />
<LazyLoad height={762} threshold={100}>
<LazyLoad height={762} offsetVertical={300}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={683}>
<LazyLoad height={683} offsetVertical={300}>
<img src='http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg' />
</LazyLoad>
<div className="filler" />
<LazyLoad height={480}>
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' />
</LazyLoad>
<div className="ScrollableContainer">
<div className="filler" />
<div className="filler" />
<div className="filler" />
<LazyLoad height={480}>
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' />
</LazyLoad>
</div>
<div className="filler" />
<LazyLoad height={720}>
<LazyLoad height={720} offsetVertical={300}>
<img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' />
</LazyLoad>
<div className="filler" />
Expand Down
20 changes: 13 additions & 7 deletions examples/basic/src/components/Application/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
.filler {
height: 300px;
}

.lazy-load {
.LazyLoad {
opacity: 0;
transition: all 2s ease-in-out;

&.is-visible {
opacity: 1;
}
}

.filler {
height: 150px;
}

.lazy-load-visible {
opacity: 1;
.ScrollableContainer {
height: 200px;
overflow: scroll;
background-color: grey;
}
20 changes: 4 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
{
"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": {
"build": "npm run build:lib && npm run build:umd && npm run build:umd:min",
"build:lib": "babel src --out-dir lib",
Expand All @@ -17,33 +13,26 @@
"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",
"react-component",
"load",
"lazy"
],

"author": "Jason Brown <loktar00@gmail.com> (https://twitter.com/loktar00)",

"contributors": [
"Sergey Laptev <iamsergeylaptev@gmail.com> (https://twitter.com/iamsergeylaptev)"
],

"license": "MIT",

"devDependencies": {
"babel-cli": "^6.3.17",
"babel-core": "^6.2.1",
Expand All @@ -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"
}
}
}

0 comments on commit 1adb8d9

Please sign in to comment.