transition-hook VS react-intersection-observer

Some React animations libraries, like react-transition-group and transition-hook, animate elements with manually configured CSS transitions. Framer Motion takes a different approach, by animating elements under the hood with preconfigured styles.

In this tutorial, we'll demonstrate how to create fast transition animations in React using transition-hook.

useTransition and useSwitchTransition from transition-hook. It makes animation so simple.

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.