✨ Add scroll-effect (shadow) to header bar

modules/ppcp-settings/resources/js/hooks/useIsScrolled.js

@@ -0,0 +1,44 @@
+/**
+ * Taken from WooCommerce core:
+ * https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/admin/client/hooks/useIsScrolled.js
+ */
+
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+const isAtBottom = () =>
+	window.innerHeight + window.scrollY >= document.body.scrollHeight;
+
+const useIsScrolled = () => {
+	const [ isScrolled, setIsScrolled ] = useState( false );
+	const [ atBottom, setAtBottom ] = useState( isAtBottom() );
+	const rafHandle = useRef( null );
+	useEffect( () => {
+		const updateIsScrolled = () => {
+			setIsScrolled( window.pageYOffset > 20 );
+			setAtBottom( isAtBottom() );
+		};
+
+		const scrollListener = () => {
+			rafHandle.current =
+				window.requestAnimationFrame( updateIsScrolled );
+		};
+
+		window.addEventListener( 'scroll', scrollListener );
+
+		window.addEventListener( 'resize', scrollListener );
+
+		return () => {
+			window.removeEventListener( 'scroll', scrollListener );
+			window.removeEventListener( 'resize', scrollListener );
+			window.cancelAnimationFrame( rafHandle.current );
+		};
+	}, [] );
+
+	return {
+		isScrolled,
+		atBottom,
+		atTop: ! isScrolled,
+	};
+};
+
+export default useIsScrolled;