├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── IO-Api-basic.js ├── IO-Api-hook.js ├── inViewport.gif ├── index.js └── moe.jpg └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Intersection observer API using REACT 2 | 3 | ![IO Api gif](/src/inViewport.gif) 4 | 5 | This repository was created for the following [Article](https://dev.to/producthackers/intersection-observer-using-react-49ko). 6 | 7 | inside /src you can find two files: 8 | 9 | - IO-Api-basic.js - Basic example of intersection observer using react. 10 | - IO-Api-hook.js - same example but with hooks. 11 | 12 | ## Available Scripts 13 | 14 | In the project directory, you can run: 15 | 16 | ### `yarn start` 17 | 18 | Runs the app in the development mode.\ 19 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 20 | 21 | The page will reload if you make edits.\ 22 | You will also see any lint errors in the console. 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "intersection-observer-api-using-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.0", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zygisS22/intersectionObserverApi/05ab68a692de1ebf8ec96f49c79670320de322ca/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zygisS22/intersectionObserverApi/05ab68a692de1ebf8ec96f49c79670320de322ca/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zygisS22/intersectionObserverApi/05ab68a692de1ebf8ec96f49c79670320de322ca/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .app { 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | background-color: #282c34; 21 | } 22 | 23 | .section { 24 | height: 100vh; 25 | width: 100%; 26 | } 27 | 28 | .box { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | background: cornflowerblue; 33 | color: rgb(32, 36, 41); 34 | font-weight: 900; 35 | font-size: 18px; 36 | width: 300px; 37 | height: 250px; 38 | border-radius: 5px; 39 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 40 | 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 41 | 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07); 42 | } 43 | 44 | .box img { 45 | width: 100%; 46 | height: 100%; 47 | object-fit: cover; 48 | } 49 | 50 | .isVisible { 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | position: fixed; 55 | top: 0; 56 | width: 100%; 57 | background: cornflowerblue; 58 | color: rgb(17, 16, 20); 59 | font-size: 20px; 60 | font-weight: 900; 61 | padding: 40px; 62 | } 63 | -------------------------------------------------------------------------------- /src/IO-Api-basic.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState } from "react" 2 | 3 | function App() { 4 | 5 | const containerRef = useRef(null) 6 | const [ isVisible, setIsVisible ] = useState(false) 7 | 8 | const callbackFunction = (entries) => { 9 | const [ entry ] = entries 10 | setIsVisible(entry.isIntersecting) 11 | } 12 | const options = { 13 | root: null, 14 | rootMargin: "0px", 15 | threshold:1.0 16 | } 17 | 18 | useEffect(() => { 19 | 20 | const observer = new IntersectionObserver(callbackFunction, options) 21 | if (containerRef.current) observer.observe(containerRef.current) 22 | 23 | return () => { 24 | if(containerRef.current) observer.unobserve(containerRef.current) 25 | } 26 | }, [containerRef, options]) 27 | 28 | return ( 29 |
30 |
{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}
31 |
32 |
Observe me you filthy voyeur :S
33 |
34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /src/IO-Api-hook.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState } from "react" 2 | import moe from "./moe.jpg" 3 | 4 | const useElementOnScreen = (options) => { 5 | const containerRef = useRef(null) 6 | const [ isVisible, setIsVisible ] = useState(false) 7 | 8 | const callbackFunction = (entries) => { 9 | const [ entry ] = entries 10 | setIsVisible(entry.isIntersecting) 11 | } 12 | 13 | useEffect(() => { 14 | 15 | const observer = new IntersectionObserver(callbackFunction, options) 16 | if (containerRef.current) observer.observe(containerRef.current) 17 | 18 | return () => { 19 | if(containerRef.current) observer.unobserve(containerRef.current) 20 | } 21 | }, [containerRef, options]) 22 | 23 | return [containerRef, isVisible] 24 | } 25 | 26 | 27 | function App() { 28 | 29 | const [ containerRef, isVisible ] = useElementOnScreen({ 30 | root: null, 31 | rootMargin: "0px", 32 | threshold:1.0 33 | }) 34 | 35 | return ( 36 |
37 |
{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}
38 |
39 |
moe
40 |
41 | ); 42 | } 43 | 44 | export default App; 45 | -------------------------------------------------------------------------------- /src/inViewport.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zygisS22/intersectionObserverApi/05ab68a692de1ebf8ec96f49c79670320de322ca/src/inViewport.gif -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './App.css'; 4 | import App from './IO-Api-basic'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /src/moe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zygisS22/intersectionObserverApi/05ab68a692de1ebf8ec96f49c79670320de322ca/src/moe.jpg --------------------------------------------------------------------------------