React. Intersection Observer hook

Cómo integrar la API Intersection Observer con React mediante hooks

Photo by Maarten van den Heuvel on Unsplash

En un artículo anterior os comentaba cómo funciona la API Intersection Observer y la forma en que podemos emplearla para conseguir que nuestras imágenes carguen de forma lazy:

Javascript. Intersection Observer

Hoy os quiero mostrar el modo en que podemos integrar esta API con React empleando para ello un custom hook de modo que siempre que podamos reutilizarlo tantas veces como queramos. Así que sin entretenernos más, ¡vamos a verlo!

Definición del useObserver hook

Con el objetivo de integrar la API IntersectionObserver crearemos un custom hook con las características siguientes al que denominaremos useObserver .

Como argumentos recibirá un objeto que representará las opciones que pasaremos al constructor de la API Intersection Observer. Recordad que estas opciones tenían el siguiente aspecto:

const options = {
  root: document.querySelector('#main-container'),
  rootMargin: '10px 0px', // like css…