DEV Community

Jose Godinez
Jose Godinez

Posted on

How to listen for mouse wheel events in React?

Sometimes, we want to listen for mouse wheel events in React.

In this article, we’ll look at how to listen for mouse wheel events in React.
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div style={{ height: 600, width: 300 }} onWheel={(e) => console.log(e)}>
        hello world
      </div>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

We set onWheel to a function that logs the event object.

Now when we scroll up and down with the mouse wheel, we should see the event object logged.
Conclusion
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

Top comments (0)