import { useContext, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import InViewContext from '../contexts/InViewContext';
export default function useSectionInView(sectionName: string) {
const { setInView } = useContext(InViewContext);
const { ref: intersectionRef, inView: isInView } = useInView({
rootMargin: '-40% 0px -40%',
});
useEffect(() => {
if (isInView) {
setInView((inView) => [...inView, sectionName]);
} else {
setInView((inView) => inView.filter((v) => v !== sectionName));
}
}, [isInView]);
return intersectionRef;
}