CarlosEspinosa88 / marvel-nextjs13

Next.js 13 (app folder)
0 stars 0 forks source link

add intersection observer #4

Closed CarlosEspinosa88 closed 1 year ago

CarlosEspinosa88 commented 1 year ago

Add Intersection observer api

1 - Create a simple instance new IntersectionObserve() 2 - IntersectionObserve get 2 params but the first one is a callback where you need to get the entries. 3 - Entries is a array of elements which contains information about the observed elements. 4 - You need iterate each one to set the new data to show up (forEach) 5 - But first at all you need a node... so we create a new ref to get this one it'll watch to observe the DOM element 6 - Create a useEffect to put observer.observe(node.current)
7 - return useEffect hook observer.disconnect() to disconnect the observer 8 - useEffect dependencies add the state you need listen all the time to get the new data from IntersectionObserve