lazy-react 2.0.4 → 3.0.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.
Files changed (18) hide show
  1. package/.babelrc +4 -2
  2. package/.eslintrc +36 -36
  3. package/README.md +1 -1
  4. package/demo/demo.js +39 -56
  5. package/demo/index.js +219 -5
  6. package/demo/index.js.LICENSE.txt +32 -0
  7. package/dist/index.js +2 -1
  8. package/dist/index.js.map +1 -1
  9. package/package.json +24 -19
  10. package/src/baseClass.js +65 -61
  11. package/src/lazyLoadBackgroundImage.js +16 -31
  12. package/src/lazyLoadComponent.js +20 -28
  13. package/src/lazyLoadFrame.js +17 -33
  14. package/src/lazyLoadImage.js +14 -31
  15. package/webpack.config.demo.js +16 -23
  16. package/webpack.config.js +70 -39
  17. package/.npmignore +0 -73
  18. package/src/indexSingleFile.js +0 -75
package/.babelrc CHANGED
@@ -1,4 +1,6 @@
1
1
  {
2
- "presets": [["es2015",{"modules":false}], "react"],
3
- "plugins": ["transform-object-rest-spread"]
2
+ "presets": ["@babel/preset-env", "@babel/preset-react"],
3
+ "plugins": [
4
+ ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
5
+ ]
4
6
  }
package/.eslintrc CHANGED
@@ -1,40 +1,40 @@
1
1
  {
2
- "env": {
3
- "browser": true,
4
- "es6": true,
5
- "node": true
2
+ "env": {
3
+ "browser": true,
4
+ "es6": true,
5
+ "node": true
6
+ },
7
+ "extends": "eslint:recommended",
8
+ "parserOptions": {
9
+ "ecmaFeatures": {
10
+ "experimentalObjectRestSpread": true,
11
+ "jsx": true
6
12
  },
7
- "extends": "eslint:recommended",
8
- "parserOptions": {
9
- "ecmaFeatures": {
10
- "experimentalObjectRestSpread": true,
11
- "jsx": true
12
- },
13
- "sourceType": "module"
14
- },
15
- "plugins": [
16
- "react"
13
+ "sourceType": "module"
14
+ },
15
+ "plugins": [
16
+ "react"
17
+ ],
18
+ "rules": {
19
+ "indent": [
20
+ "error",
21
+ 2
22
+ ],
23
+ "linebreak-style": [
24
+ 2,
25
+ "unix"
26
+ ],
27
+ "quotes": [
28
+ 2,
29
+ "single"
30
+ ],
31
+ "semi": [
32
+ 2,
33
+ "never"
17
34
  ],
18
- "rules": {
19
- "indent": [
20
- 2,
21
- "tab"
22
- ],
23
- "linebreak-style": [
24
- 2,
25
- "unix"
26
- ],
27
- "quotes": [
28
- 2,
29
- "single"
30
- ],
31
- "semi": [
32
- 2,
33
- "never"
34
- ],
35
- "comma-spacing": [
36
- 2,
37
- { "before": false, "after": true }
38
- ]
39
- }
35
+ "comma-spacing": [
36
+ 2,
37
+ { "before": false, "after": true }
38
+ ]
39
+ }
40
40
  }
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # lazy-react
2
2
 
3
- [![npm version](https://badge.fury.io/js/lazy-react.svg)](https://badge.fury.io/js/lazy-react) [![Code Climate](https://codeclimate.com/github/jonathanobino/react-lazy/badges/gpa.svg)](https://codeclimate.com/github/jonathanobino/react-lazy) [![Issue Count](https://codeclimate.com/github/jonathanobino/react-lazy/badges/issue_count.svg)](https://codeclimate.com/github/jonathanobino/react-lazy)[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
3
+ [![npm version](https://badge.fury.io/js/lazy-react.svg)](https://badge.fury.io/js/lazy-react) [![Issue Count](https://codeclimate.com/github/jonathanobino/react-lazy/badges/issue_count.svg)](https://codeclimate.com/github/jonathanobino/react-lazy) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![dependecies](https://david-dm.org/jonathanobino/react-lazy.svg)](https://david-dm.org)
4
4
 
5
5
 
6
6
  Utility components to lazy load images, images-as-background and iframes using only requestAnimationFrame to handle scroll (both vertical and orizzontal) and window resize.
package/demo/demo.js CHANGED
@@ -3,18 +3,8 @@ import ReactDOM from 'react-dom'
3
3
  import {LazyImage, LazyBackgroundImage, LazyFrame, LazyComponent} from '../dist'
4
4
 
5
5
 
6
- class Experimental extends Component {
7
- constructor(props){
8
- super(props)
9
- }
10
-
11
- componentDidMount(){
12
- console.log('now I\'m loaded')
13
- }
14
-
15
- render(){
16
- return <h1> I'm lazy loaded !</h1>
17
- }
6
+ function Experimental (props){
7
+ return <h1> I'm lazy loaded!</h1>
18
8
  }
19
9
 
20
10
  class Demo extends Component {
@@ -26,61 +16,54 @@ class Demo extends Component {
26
16
  let style = {
27
17
  minHeight:'100vh'
28
18
  }
29
- return <div>
30
- <h2>Just scroll</h2>
31
- <div style={{
32
- minHeight:'100vh',
33
- minWidth:'100vw',
34
- backgroundColor:'tomato'
35
- }}></div>
36
- <LazyImage
37
- link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
38
- offset={0}
39
- // style={style}
40
- />
41
- <LazyImage
42
- link={'https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=44828cfc286e8eb8cd0ed2ca561f8cb9'}
19
+ return <div>
20
+ <h2>Just scroll</h2>
21
+ <div style={{
22
+ minHeight: '100vh',
23
+ minWidth: '100vw',
24
+ backgroundColor: 'tomato'
25
+ }}></div>
26
+ <LazyImage
27
+ link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
28
+ offset={0}
29
+ />
30
+ <LazyImage
31
+ link={'https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=44828cfc286e8eb8cd0ed2ca561f8cb9'}
43
32
  offset={100}
44
33
  className={'styledImage'}
45
- // style={style}
46
- />
47
- <LazyImage
48
- link={'https://images.unsplash.com/photo-1472132858735-6313c7962473?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f38318ed6adee6db020705bedf6d6e10'}
34
+ />
35
+ <LazyImage
36
+ link={'https://images.unsplash.com/photo-1472132858735-6313c7962473?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f38318ed6adee6db020705bedf6d6e10'}
49
37
  offset={100}
50
- // style={style}
51
- />
52
- <LazyImage
53
- link={'https://images.unsplash.com/photo-1469899324414-c72bfb4d4161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8d708d646e3b2d32c5faf67e01919872'}
38
+ />
39
+ <LazyImage
40
+ link={'https://images.unsplash.com/photo-1469899324414-c72bfb4d4161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=8d708d646e3b2d32c5faf67e01919872'}
54
41
  offset={100}
55
42
  className={'test'}
56
43
  preserveAspect={false}
57
- // style={style}
58
- />
59
- <LazyImage
60
- link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
44
+ />
45
+ <LazyImage
46
+ link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
61
47
  offset={100}
62
48
  className={'test'}
63
49
  preserveAspect={false}
64
- // style={style}
65
- />
66
- <LazyBackgroundImage
67
- link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
68
- className="fill"
69
- // style={style}
70
- />
50
+ />
51
+ <LazyBackgroundImage
52
+ link={'https://images.unsplash.com/photo-1462834026679-7c03bf571a67?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=6e160dc1e65511df7bf1c461f8a93c82'}
53
+ className="fill"
54
+ />
71
55
 
72
- <LazyComponent>
73
- <Experimental/>
74
- <Experimental/>
75
- <Experimental/>
76
- </LazyComponent>
56
+ <LazyComponent>
57
+ <Experimental />
58
+ <Experimental />
59
+ <Experimental />
60
+ </LazyComponent>
77
61
 
78
- <LazyFrame
79
- link={'http://jonathanobino.xyz'}
80
- scrolling={true}
81
- // style={style}
82
- />
83
- </div>
62
+ <LazyFrame
63
+ link={'http://jonathanobino.xyz'}
64
+ scrolling={'true'}
65
+ />
66
+ </div>
84
67
  }
85
68
  }
86
69