Website edit functionality.

components/helpers/CheckVisible.js

@@ -0,0 +1,41 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  return !(
+    rect.bottom < 0 ||
+    rect.right < 0 ||
+    rect.left > window.innerWidth ||
+    rect.top > window.innerHeight
+  );
+}
+
+export default function CheckVisible({ className, children }) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef();
+
+  useEffect(() => {
+    const checkPosition = () => {
+      if (ref.current) {
+        const state = isInViewport(ref.current);
+        if (state !== visible) {
+          setVisible(state);
+        }
+      }
+    };
+
+    checkPosition();
+
+    window.addEventListener('scroll', checkPosition);
+
+    return () => {
+      window.removeEventListener('scroll', checkPosition);
+    };
+  }, [visible]);
+
+  return (
+    <div ref={ref} className={className} data-visible={visible}>
+      {typeof children === 'function' ? children(visible) : children}
+    </div>
+  );
+}

components/helpers/StickyHeader.js

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+
+export default function StickyHeader({
+  className,
+  stickyClassName,
+  stickyStyle,
+  children,
+  enabled = true,
+}) {
+  const [sticky, setSticky] = useState(false);
+  const ref = useRef();
+  const offsetTop = useRef(0);
+
+  useEffect(() => {
+    const checkPosition = () => {
+      if (ref.current) {
+        if (!offsetTop.current) {
+          offsetTop.current = ref.current.offsetTop;
+        }
+        const state = window.pageYOffset > offsetTop.current;
+        if (sticky !== state) {
+          setSticky(state);
+        }
+      }
+    };
+
+    checkPosition();
+
+    if (enabled) {
+      window.addEventListener('scroll', checkPosition);
+    }
+
+    return () => {
+      window.removeEventListener('scroll', checkPosition);
+    };
+  }, [sticky, enabled]);
+
+  return (
+    <div
+      ref={ref}
+      data-sticky={sticky}
+      className={classNames(className, { [stickyClassName]: sticky })}
+      style={sticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
+    >
+      {children}
+    </div>
+  );
+}