Create useOnScreen hooks

Hook which returns boolean representing is element is visible on screen

Author: thecactoos

src/hooks/useOnScreen.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+function useOnScreen(ref, rootMargin = "0px") {
+  // State and setter for storing whether element is visible
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Update our state when observer callback fires
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+      }
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  });
+
+  return isIntersecting;
+}
+
+export default useOnScreen;