initial commit: rocket.new export of broadcastbeat
This commit is contained in:
37
src/hooks/useScrollReveal.ts
Normal file
37
src/hooks/useScrollReveal.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
'use client';
|
||||
import { useEffect, useRef, RefObject } from 'react';
|
||||
|
||||
interface ScrollRevealOptions {
|
||||
threshold?: number;
|
||||
rootMargin?: string;
|
||||
once?: boolean;
|
||||
}
|
||||
|
||||
export function useScrollReveal<T extends HTMLElement>(
|
||||
options: ScrollRevealOptions = {}
|
||||
): RefObject<T> {
|
||||
const { threshold = 0.12, rootMargin = '0px 0px -40px 0px', once = true } = options;
|
||||
const ref = useRef<T>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.classList.add('scroll-revealed');
|
||||
if (once) observer.unobserve(el);
|
||||
} else if (!once) {
|
||||
el.classList.remove('scroll-revealed');
|
||||
}
|
||||
},
|
||||
{ threshold, rootMargin }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [threshold, rootMargin, once]);
|
||||
|
||||
return ref;
|
||||
}
|
||||
Reference in New Issue
Block a user