Observe an element's entry in viewport once with IntersectionObserver in React

Question

I'm using a function to animate elements when getting into viewport but I would like to change it so it will do it only once...I/m not sure how/where to edit to accomplish this...any advice?

function useIsInViewport(ref) { const [isIntersecting, setIsIntersecting] = useState(false); const observer = useMemo( () => new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting), ), [], ); useEffect(() => { observer.observe(ref.current); return () => { observer.disconnect(); }; }, [ref, observer]); return isIntersecting; }

On page I use a const for setting:

const ref1 = useRef(null); const isInViewport1 = useIsInViewport(ref1);

Then setting a class on the element:

${isInViewport1 && "fadeInDown"}

Youssouf Oumar · Accepted Answer · 2022-09-10 16:08:18Z

1

You need to call observer.unobserve(entry.target) after the first iteration. Like below in in your specific case:

function useIsInViewport(ref) { const [isIntersecting, setIsIntersecting] = useState(false); const observer = useMemo( () => new IntersectionObserver(([entry]) => { setIsIntersecting(entry.isIntersecting); observer.unobserve(entry.target); // line I added }), [] ); useEffect(() => { observer.observe(ref.current); return () => { observer.disconnect(); }; }, [ref, observer]); return isIntersecting; }

answered Sep 10, 2022 at 16:08

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

KnapLelijk Over a year ago

I've chnaged it to setIsIntersecting(entry.isIntersecting), observer.unobserve(entry.target) but that gives the error: 'entry' is not defined

Youssouf Oumar Over a year ago

Why you changed it? Cause it didn't work?

KnapLelijk Over a year ago

Because React is giving an error when using semicolon instead of a comma

Youssouf Oumar Over a year ago

Do you have { as I did?

Youssouf Oumar Over a year ago

Glad I could help. Though I think my comment // line I added is the reason why you did what you did. I should have mentioned I changed () to {}.

|

Collectives™ on Stack Overflow

Observe an element's entry in viewport once with IntersectionObserver in React

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related