react-use-hotkeys VS react-intersection-observer

Depends on how exactly you want to implement this. If you just want to make everything accessible with the keyboard, the necessary parts should be navigated to by tabs. If you want to use hotkeys like Github does, there are a few libraries that work. I used this one in a project and it works pretty well.

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.