lazy-react 2.0.5 → 3.0.1

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,21 +1,12 @@
 var path = require('path')
-var webpack = require('webpack')
 
 module.exports = {
+  mode:'development',
   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: [
       {
@@ -25,4 +16,4 @@ module.exports = {
       }
     ]
   }
-}
+}

package/webpack.config.js

@@ -2,6 +2,7 @@ var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
+  mode:'production',
   entry: './src/index.js',
   devtool: 'source-map',
   output: {
@@ -10,6 +11,40 @@ module.exports = {
     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: {
@@ -28,15 +63,6 @@ module.exports = {
       }
     }
   ],
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      },
-      __DEVELOPMENT__: false
-    }),
-    new webpack.optimize.UglifyJsPlugin({ comments: false })
-  ],
   module: {
     rules: [
       {

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 }