lazy-react 2.0.4 → 3.0.0

package/src/lazyLoadImage.js

@@ -1,34 +1,17 @@
-import React from 'react' // eslint-disable-line no-unused-vars
-import CheckIfRender from './baseClass'
+import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './baseClass'
 
-export default class LazyImage extends CheckIfRender {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    return (
-      <img
-        src={this.state.link}
-        alt={this.props.alt}
-        style={this.style}
-        className={this.props.className}
-        ref={node => (this.domNode = node)}
-      />
-    )
-  }
-  componentWillMount() {
-    if (this.props.className === '' && this.props.preserveAspect === false) {
-      this.style = {
-        minHeight: '300px',
-        minWidth: '300px',
-        ...this.props.style
-      }
-    }
-  }
-}
+export default function LazyImage(props) {
+  const ref = useRef()
+  const isViewable = useIsInViewPort(ref, props)
 
-LazyImage.defaultProps = {
-  style: {},
-  className: '',
-  preserveAspect: true
+  return (
+    <img
+      src={isViewable.link}
+      alt={props.alt}
+      style={props.style}
+      className={props.className}
+      ref={ref}
+    />
+  )
 }

package/webpack.config.demo.js

@@ -1,26 +1,19 @@
 var path = require('path')
-var webpack = require('webpack')
 
 module.exports = {
-	entry:'./demo/demo.js',
-	output: {
-		path: path.join(__dirname),
-		filename: './demo/index.js'
-	},
-	plugins: [
-		new webpack.DefinePlugin({
-			'process.env': {
-				NODE_ENV: '"production"',
-			},
-			__DEVELOPMENT__: false,
-		}),
-		new webpack.optimize.UglifyJsPlugin({comments: false })
-	],
-	module: {
-		rules: [{
-			test: /\.js$/,
-			use: 'babel-loader',
-			exclude: /node_modules/
-		}]
-	}
-}
+  mode:'development',
+  entry: './demo/demo.js',
+  output: {
+    path: path.join(__dirname),
+    filename: './demo/index.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  }
+}

package/webpack.config.js

@@ -2,43 +2,74 @@ var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
-	entry:'./src/index.js',
-	devtool: 'source-map',
-	output: {
-		library: 'LazyReact',
-		libraryTarget: 'umd',
-		path: path.join(__dirname),
-		filename: './dist/index.js'
-	},
-	externals: [{
-		'react': {
-			root: 'React',
-			commonjs2: 'react',
-			commonjs: 'react',
-			amd: 'react'
-		}
-	}, {
-		'react-dom': {
-			root: 'ReactDOM',
-			commonjs2: 'react-dom',
-			commonjs: 'react-dom',
-			amd: 'react-dom'
-		}
-	}],
-	plugins: [
-		new webpack.DefinePlugin({
-			'process.env': {
-				NODE_ENV: '"production"',
-			},
-			__DEVELOPMENT__: false,
-		}),
-		new webpack.optimize.UglifyJsPlugin({comments: false })
-	],
-	module: {
-		rules: [{
-			test: /\.js$/,
-			use: 'babel-loader',
-			exclude: /node_modules/
-		}]
-	}
+  mode:'production',
+  entry: './src/index.js',
+  devtool: 'source-map',
+  output: {
+    library: 'LazyReact',
+    libraryTarget: 'umd',
+    path: path.join(__dirname),
+    filename: './dist/index.js'
+  },
+  // optimization: {
+  //   minimizer: [
+  //     new UglifyJsPlugin({
+  //       sourceMap: true,
+  //       uglifyOptions: {
+  //         compress: {
+  //           inline: false
+  //         },
+  //         output: {
+  //           comments: false
+  //         }
+  //       }
+  //     })
+  //   ],
+  //   runtimeChunk: false,
+  //   splitChunks: {
+  //     cacheGroups: {
+  //       default: false,
+  //       commons: {
+  //         test: /[\\/]node_modules[\\/]/,
+  //         name: 'vendor_app',
+  //         chunks: 'all',
+  //         minChunks: 2
+  //       }
+  //     }
+  //   }
+  // },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      },
+      __DEVELOPMENT__: false
+    })],
+  externals: [
+    {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react'
+      }
+    },
+    {
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom'
+      }
+    }
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  }
 }

package/.npmignore

@@ -1,73 +0,0 @@
-# Created by https://www.gitignore.io/api/osx,sublimetext,node
-
-### OSX ###
-.DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
-
-
-### SublimeText ###
-# cache files for sublime text
-*.tmlanguage.cache
-*.tmPreferences.cache
-*.stTheme.cache
-
-# workspace files are user-specific
-*.sublime-workspace
-
-# project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using SublimeText
-# *.sublime-project
-
-# sftp configuration file
-sftp-config.json
-
-
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
-node_modules

package/src/indexSingleFile.js

@@ -1,75 +0,0 @@
-//this file it's here just for reference on how build size differs with webpack and babel when there is one or more files involved
-
-import React from 'react' // eslint-disable-line no-unused-vars
-import ReactDom from 'react-dom'
-
-class CheckIfRender extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      link: ''
-    }
-  }
-  listener() {
-    if (window.scrollY + window.innerWidth + 100 > this.state.top) {
-      this.setState({ link: this.props.link })
-      this.removeListener()
-    }
-  }
-  removeListener() {
-    window.removeEventListener('scroll', this.listener)
-  }
-  componentDidMount() {
-    const element = ReactDom.findDOMNode(this)
-    const { top } = element.getBoundingClientRect()
-    this.setState({ top })
-    window.addEventListener('scroll', this.listener)
-  }
-  componentWillUnmount() {
-    this.removeListener()
-  }
-}
-
-class LazyFrame extends CheckIfRender {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    return (
-      <iframe
-        height={this.props.height || '500'}
-        scrolling={this.props.scrolling || 'no'}
-        src={this.state.link}
-        frameBorder={this.props.frameBorder || 'no'}
-        allowTransparency={this.props.allowTransparency || 'true'}
-        allowFullScreen={this.props.allowFullScreen || 'true'}
-        style={this.props.style || { width: '100%' }}
-      />
-    )
-  }
-}
-
-class LazyBackgroundImage extends CheckIfRender {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    return (
-      <div
-        className={this.props.className}
-        style={{ backgroundImage: `url(${this.state.link})` }}
-      />
-    )
-  }
-}
-
-class LazyImage extends CheckIfRender {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    return <img src={this.state.link} alt={this.props.alt} />
-  }
-}
-
-export { LazyBackgroundImage, LazyImage, LazyFrame }