lazy load example added

package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-lazy-images",
   "version": "0.1.0",
+  "source": "src/App.tsx",
   "private": true,
   "dependencies": {
     "@types/jest": "24.0.18",
     "@types/node": "12.7.5",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
+    "faker": "^4.1.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1",
@@ -32,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/faker": "^4.1.5"
   }
-}
+}

src/App.css

@@ -1,33 +1,16 @@
-.App {
-  text-align: center;
+.App-header{
+    display: flex;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.container{
+    width: 600px;
+    display: flex;
+    overflow: scroll;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+img{
+    margin-right: 10px;
+}

src/App.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Lazy from './lazy';
 
 const App: React.FC = () => {
+  const placeholder="https://picsum.photos/id/237/500/300"
+
+  const generateImg=()=>`https://picsum.photos/id/${Math.floor(Math.random() * 999)}/500/300`
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+      <div className="container">
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      <Lazy placeholder={placeholder} src={generateImg()} ratio={0.1}/>
+      </div>
       </header>
     </div>
   );

src/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+

src/lazy.tsx

@@ -0,0 +1,31 @@
+import React, { useState, useRef } from 'react';
+
+function Lazy(props: { placeholder: string; src: string; ratio: number; className?: string; force?: boolean; onVisible?: Function }) {
+    const [currentSrc, setCurrentSrc] = useState(props.force ? props.src : props.placeholder);
+    const el = useRef(null);
+
+    const handleChange = ([root]: any, ) => {
+        if (root.intersectionRatio > Number(props.ratio) && root.isIntersecting === true) {
+            setCurrentSrc(props.src);
+            observer.disconnect();
+            if (props.onVisible) props.onVisible();
+        }
+    }
+
+    const observer = new IntersectionObserver(handleChange, { threshold: props.ratio });
+
+    const handleObserve = () => {
+        observer.observe(el.current as any);
+    }
+
+    return (<img
+        className={props.className}
+        data-src={props.src}
+        onLoad={handleObserve}
+        ref={el}
+        src={currentSrc} />);
+}
+
+export default Lazy;
+
+

tsconfig.json

@@ -20,6 +20,6 @@
     "jsx": "react"
   },
   "include": [
-    "src"
+    "src/lazy.tsx"
   ]
-}
+}

yarn.lock

@@ -1325,6 +1325,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/faker@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-4.1.5.tgz#8f620f9c9a67150aa0a32b4e8a407da43fca61d4"
+  integrity sha512-YSDqoBEWYGdNk53xSkkb6REaUaVSlIjxIAGjj/nbLzlZOit7kUU+nA2zC2qQkIVO4MQ+3zl4Sz7aw+kbpHHHUQ==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -4173,6 +4178,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+  integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=
+
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -8263,7 +8273,7 @@ react-dev-utils@^9.0.3:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
   integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
@@ -8349,7 +8359,7 @@ [email protected]:
   optionalDependencies:
     fsevents "2.0.7"
 
-[email protected]:
+react@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
   integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==