- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - WheelEvent Handler
In React JS, a WheelEvent handler function is used to respond to mouse wheel movements. It is a way to make our React application interactive when users scroll with their mouse.
Mouse wheel interactions are common in online apps, mainly while scrolling content. So we will see the WheelEvent interface and how to use it to handle mouse wheel events in a React application. The WheelEvent interface shows events that occur when a user moves their mouse wheel or a similar input device. It offers useful information regarding the scrolling actions.
Syntax
<div onWheel={e => console.log('onWheel')} />
Remember to attach the onWheel event to the element we want to make scrollable. This is just a basic introduction, and we can customize the handler function based on our specific needs.
Parameters
e − It is a React event Object. We can use it with the WheelEvent properties.
Properties of WheelEvent
Sr.No | Properties & Description | Data Type |
---|---|---|
1 | deltaX Horizontal scroll amount |
Double |
2 | deltaY Vertical scroll amount |
Double |
3 | deltaZ Scroll amount for the z-axis |
Double |
4 | deltaMode Unit of the delta* values' scroll amount |
Unsigned Long |
Examples
Example − Simple App with Wheel Event Handler
Now let's create a small React app to show how to use the WheelEvent in application. Using the WheelEvent interface, we will create a component that tracks scroll events. So the code is given below −
import React from 'react'; class App extends React.Component { handleWheelEvent = (e) => { console.log('onWheel'); console.log('deltaX:', e.deltaX); console.log('deltaY:', e.deltaY); console.log('deltaZ:', e.deltaZ); console.log('deltaMode:', e.deltaMode); }; render() { return ( <div onWheel={this.handleWheelEvent}> <h1>Mouse WheelEvent Logger</h1> <p>Scroll mouse wheel and check the console for event details.</p> </div> ); } } export default App;
Output
In this component, we have created an onWheel event handler that logs information about the wheel event like deltaX, deltaY, deltaZ, and deltaMode as we can see in the output.
Example − Scroll Component App
In this example, the handleScroll function is triggered when the user scrolls using the mouse wheel. The event.deltaY gives us information about the direction and intensity of the scroll.
import React from 'react'; class ScrollComponent extends React.Component { handleScroll = (event) => { // This function will be called when the user scrolls console.log('Mouse wheel moved!', event.deltaY); }; render() { return ( <div onWheel={this.handleScroll}> <p>Scroll me with the mouse wheel!</p> </div> ); } } export default ScrollComponent;
Output
Example − Change Background Color onScroll
Here is another simple React app using the WheelEvent handler function. This time, we will create an app where the background color changes based on the direction of the mouse wheel scroll −
import React, { useState } from 'react'; const ScrollColorChangeApp = () => { const [backgroundColor, setBackgroundColor] = useState('lightblue'); const handleScroll = (event) => { // Change the background color based on the scroll direction if (event.deltaY > 0) { setBackgroundColor('lightgreen'); } else { setBackgroundColor('lightcoral'); } }; return ( <div onWheel={handleScroll} style={{ height: '100vh', display: 'flex', alignItems: 'center', backgroundColor: backgroundColor, transition: 'background-color 0.5s ease', }} > <h1>Scroll to Change Background Color</h1> </div> ); }; export default ScrollColorChangeApp;
Output
Summary
The WheelEvent interface is helpful in React applications for handling mouse wheel events. It gives useful information on the user's scrolling behaviors, like scroll direction and intensity. We can create more dynamic and responsive web apps that improve the user experience by using the WheelEvent interface.
To Continue Learning Please Login
Login with Google