react-awesome-reveal VS react-intersection-observer

React Awesome Reveal has more than 873 GitHub stars and 10,000 weekly NPM downloads.

Hi! A new major version of React Awesome Reveal, an animation library for React apps for easily adding revealing effects, is now out 🚀 Give it a try!

React Awesome Reveal is a TypeScript package that provides reveal animations using the Intersection Observer API to detect when elements appear in the viewport. Its animations are provided by Emotion and implemented as CSS animations to benefit from hardware acceleration.

Here is the GitHub repo if your interested https://github.com/dennismorello/react-awesome-reveal

1. Install react-intersection-observer from Github

Alternatively, we can use a library that is designed to handle this functionality. This is the approach that we’ll follow in this article. We’ll be using the react-intersection-observer library, which is a React implementation of the intersection observer API. This library provides Hooks and render props that make it easy to track the scroll position of elements on the viewport.

This would do it for ya if you don't want to implement it yourself https://github.com/thebuilder/react-intersection-observer/blob/master/src/useInView.tsx

I'll use React-Interception-Observer to control the screen events you can check the documentation if you wanna know more.

I'm going to be using react-intersection-observer library, which uses native IntersectionObserver underneath and gives us neat hooks for ease of use.

There is no way you didn't see this package before building your own : https://github.com/thebuilder/react-intersection-observer

TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.

*react-intersection-observer *— react implementation of the Intersection Observer API to tell you *when an element enters or leaves the viewport *(from official description). Docs here: https://github.com/thebuilder/react-intersection-observer#readme

I eventually ended up combining react-intersection-observer and react-content-loader to create a progressive loading experience where elements get loaded as they become visible to users.