How to Trigger an Event On Web Page Scroll in React Js

Browser events happen within the system you are programming concerning user interaction with the system.

Events can be invoked by a wide array of actions; for instance, clicking a button, hovering over a button or div, scrolling a webpage, submitting a form, or loading a page.

Ideally, web developers use click, mouseover, scroll, keydown, load, submit the change, focus, and blur events to trigger particular functions inside their web app to provide an intuitive user experience.

In this step-by-step tutorial, we will teach you how to trigger an event on a browser or window scroll using React Js.

To call an event in React, we will use the React scroll trigger package. Using the React scroll trigger library, we can fire any event when the user scrolls the browser window.

Web developers often use these events to trigger specific actions or functions within their web applications, allowing for more interactive and dynamic user experiences.

How to Add Class On Browser Scroll in React Js

• Step 1: Setup React Environment
• Step 2: Install Required Packages
• Step 3: Build Function Component
• Step 4: Trigger Event On Scroll
• Step 5: Register Component in App
• Step 6: Run Development Server

Setup React Environment

Installing a new React app is easy, you can use the Create React App tool to dynamically install a React framework.

Open the terminal, type the below command and hit enter.

npx create-react-app my-react-app

You have to move into the project folder.

cd my-react-app

Install Required Packages

Next, in our React project we are going to install react scroll trigger and bootstrap libraries. You have invoke the suggested command to add the packages.

npm install react-scroll-trigger bootstrap

Build Function Component

There are two ways through you can create component in React. A class component or funciton component, we will create the feature using the JavaScript function.

You have to add the code in the components/Home.js file.

import React, { useState } from "react";
import ScrollTrigger from "react-scroll-trigger";
function Home() {
  return (
    <div></div>
  )
}
export default Home

Trigger Event On Scroll

We will now create a React component that monitors scroll events to trigger callbacks when it enters, exits, and progresses through the viewport component.

Update code inside the components/Home.js file.

import React, { useState } from "react";
import ScrollTrigger from "react-scroll-trigger";
function Home() {
  const [isVisible, setIsVisible] = useState();
  function onEnterViewport() {
    setIsVisible(true);
  }
  function onExitViewport() {
    setIsVisible(false);
  }
  return (
    <ScrollTrigger onEnter={onEnterViewport} onExit={onExitViewport}>
      <div className={`${isVisible ? "container-animate" : ""}`} />
    </ScrollTrigger>
  );
}
export default Home;

Register Component in App

We are now going to register the Home component in the main file, hence open the src/App.js file. Here you need to import the Home module as given below.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Home from "./components/Home";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">
        React Js Add Class to Div On Window Scroll Example
      </h2>
      <Home />
    </div>
  );
}
export default App;

Run Development Server

We now need to start the React development server; head over to terminal window, here you need to type the below command and hit enter.

npm start

After you evoke the above command, your command line tool will automatically run the app on the default web browser.

http://localhost:3000

Summary

In this detailed guide, we have seen how to fire an event when the user scrolls the web page. We learned how to add a new class to a div item when it comes to the viewport.

I hope this simple tutorial will help you understand how to add dynamic classes in React using the scroll event.