/infinite-gif-scroller

Exploring the features of the Javascript Intersection Observer API and React Hooks

Primary LanguageJavaScript

Infinite GIF Scroller

Using the intersection-observer-api and React Hooks

  • Simple project to explore the features of the Javascript Intersection Observer API with ReactJS
  • App pulls the top ten trending GIFs as mp4s from GIPHY
  • Each video element has an observer attached to it which pauses or initiates playback depending on how much of the element is visible
  • At the end of the list is an invisible element with an attached observer. When it intersects with the viewport more GIFs are fetched
  • The React Context API and Hooks are used for state management
  • Project published to github pages at https://brien-crean.github.io/infinite-gif-scroller/

This project was bootstrapped with Create React App