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.

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>
    </>
  );
}

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.