50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
/**
|
|
* Hook personnalisé pour gérer les effets de scroll
|
|
* Remplace la logique répétée dans Navigation.tsx et ScrollToTopButton.tsx
|
|
*/
|
|
export const useScrollEffects = () => {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollY = window.scrollY;
|
|
setScrolled(scrollY > 20);
|
|
setIsVisible(scrollY > 300);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
// Call once to set initial state
|
|
handleScroll();
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const scrollToTop = useCallback(() => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}, []);
|
|
|
|
const scrollToElement = useCallback((elementId: string) => {
|
|
const element = document.getElementById(elementId);
|
|
if (element) {
|
|
element.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return {
|
|
scrolled,
|
|
isVisible,
|
|
scrollToTop,
|
|
scrollToElement,
|
|
};
|
|
};
|