From 8fa56b351e667321e71147025f1a2f0640c35b35 Mon Sep 17 00:00:00 2001 From: surfiniaburger Date: Fri, 22 Sep 2023 17:32:50 +0100 Subject: [PATCH 1/3] surfiniaburger --- CONTRIBUTORS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 70965b1..4cddd76 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -168,6 +168,7 @@ A GitHub conflict is when people make changes to the same area or line in a file - ### **A** + - [Adedoyinsola Ogungbesan](https://github.com/surfiniaburger) - [Alimurtuza Patrawala](https://github.com/CYBWEBALI) - [Arslan Malik](https://github.com/ArslanYM) - [Ashwanthram K L](https://github.com/AshwanthramKL) From e15336c188a176c9691f7f46791305fd57102358 Mon Sep 17 00:00:00 2001 From: surfiniaburger Date: Fri, 22 Sep 2023 18:04:34 +0100 Subject: [PATCH 2/3] added comments to the hooks --- web/src/hooks/useInterectionObserver.jsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/web/src/hooks/useInterectionObserver.jsx b/web/src/hooks/useInterectionObserver.jsx index 758ff28..6c1b0cc 100644 --- a/web/src/hooks/useInterectionObserver.jsx +++ b/web/src/hooks/useInterectionObserver.jsx @@ -1,26 +1,37 @@ import { useEffect, useRef, useState } from "react"; import PropTypes from "prop-types"; -export const useInterectionObserver = (margin = "0px") => { +// Custom hook for IntersectionObserver +export const useIntersectionObserver = (margin = "0px") => { + // State to track whether the observed element is intersecting const [isIntersecting, setIsIntersecting] = useState(false); + // Ref to hold a reference to the observed element const observerRef = useRef(null); + // Effect hook to set up the IntersectionObserver useEffect(() => { + // Create an IntersectionObserver const observer = new IntersectionObserver( ([entry]) => { + // Update isIntersecting based on the observed intersection setIsIntersecting(entry.isIntersecting); }, - { rootMargin: margin } + { rootMargin: margin } // Apply margin options to the observer ); + + // Start observing the referenced element observer.observe(observerRef.current); + // Clean up the observer when the component unmounts return () => observer.disconnect(); - }, [margin]); + }, [margin]); // Re-run the effect when the margin prop changes + // Return an object containing the isIntersecting state and observerRef return { isIntersecting, observerRef }; }; -useInterectionObserver.propTypes = { - isVisible: PropTypes.string, +// Prop type validation for the useIntersectionObserver hook +useIntersectionObserver.propTypes = { + isVisible: PropTypes.string, // Prop type validation for the isVisible prop }; From 5055ac2ba1acaf2f2122b0c1eca7eb6d186db8a4 Mon Sep 17 00:00:00 2001 From: surfiniaburger Date: Sat, 23 Sep 2023 19:39:01 +0100 Subject: [PATCH 3/3] removed comments --- web/src/hooks/useInterectionObserver.jsx | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/web/src/hooks/useInterectionObserver.jsx b/web/src/hooks/useInterectionObserver.jsx index 6c1b0cc..d7aad1b 100644 --- a/web/src/hooks/useInterectionObserver.jsx +++ b/web/src/hooks/useInterectionObserver.jsx @@ -1,37 +1,23 @@ import { useEffect, useRef, useState } from "react"; import PropTypes from "prop-types"; -// Custom hook for IntersectionObserver export const useIntersectionObserver = (margin = "0px") => { - // State to track whether the observed element is intersecting const [isIntersecting, setIsIntersecting] = useState(false); - - // Ref to hold a reference to the observed element const observerRef = useRef(null); - - // Effect hook to set up the IntersectionObserver useEffect(() => { - // Create an IntersectionObserver const observer = new IntersectionObserver( ([entry]) => { - // Update isIntersecting based on the observed intersection setIsIntersecting(entry.isIntersecting); }, - { rootMargin: margin } // Apply margin options to the observer + { rootMargin: margin } ); - - // Start observing the referenced element observer.observe(observerRef.current); - - // Clean up the observer when the component unmounts return () => observer.disconnect(); - }, [margin]); // Re-run the effect when the margin prop changes - - // Return an object containing the isIntersecting state and observerRef + }, [margin]); return { isIntersecting, observerRef }; }; -// Prop type validation for the useIntersectionObserver hook + useIntersectionObserver.propTypes = { - isVisible: PropTypes.string, // Prop type validation for the isVisible prop + isVisible: PropTypes.string, };