How to create on scroll background color change in React

After viewing a couple of sites adding background color change during scroll, I wondered how could I replicate this and utilize it in my sites. Throughout my search, I found that it can be accomplished in different ways. Whether that be using react libraries, javascript libraries, or vanilla javascript. I wanted to incorporate the code in vanilla javascript, utilizing scrollTo(), scrollTop(), viewport, etc… But it was time-consuming and I needed to get the site up and running. Through my search, I found that the best implementation to achieve this was a javascript library called Waypoints that is also available in React, and that’s what I’ll be converting in this post.

For starters, let’s create a React application by running npx create-react-app my-app , then run npm i react-waypoint --save to install react-waypoint in your packages.

To keep things short, we will be working within the “App” files. For starters, let's import waypoint at the top of App.jsimport { Waypoint } from “react-waypoint";.Then, create a page with multiple large sections, by declaring a renderSections function that will render an amount of given sections. I’ve named sections as zections for a bit of pizazz.