Languages
[Edit]
EN

React - mouse button press and hold example

0 points
Created by:
Dirask Community
6240

Hi there! 👋😊

In this article, I┬áwould like to show you mouse button┬ápress┬áand hold┬áexample┬áin┬áReact.┬á🖱

At the start, I wanted to tell you that unfortunately there is no press and hold mouse button event in React. However, I will show you how to perform some logic when the mouse button is pressed and held, and how to break this logic when we stop pressing the button or when our cursor leaves the button field.

Final result:

Press and hold - growing circle div
Press and hold - growing circle div

Below example presents how to create a counter which increments on button press and hold every 0.1s. As the counter increases, the height and width of my element also increase, as they depend precisely on the counter.

In the example I've used:

  • useState┬áhook - to manage the counter as App component's state,
  • useRef┬áhook - to create a reference that will help us to set and clear the interval,
  • onMouseDown┬áevent - to start incrementing our counter,
  • onMouseUp┬á/┬áonMouseLeave┬áevents┬á - to stop incrementing the counter,
  • useEffect┬áhook - to stop the counter when App component is destroyed.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
  const [counter, setCounter] = React.useState(100);
  const intervalRef = React.useRef(null);

  React.useEffect(() => {
    return () => stopCounter(); // when App is unmounted we should stop counter
  }, []);

// styles --------------------------------------

  const containerStyle = {
    height: '300px',
    width: '300px',
  };

  const elementStyle = {
    margin: '5px',
    height: `${counter}px`,
    width: `${counter}px`,
    background: 'radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac)',
    border: '2px solid black',
    borderRadius: '50%',
    boxShadow: '10px 5px 5px #BEBEBE',
  };

// functions -----------------------------------

  const startCounter = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 10);
  };

  const stopCounter = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  return (
    <div style={containerStyle}>
      <div
        onMouseDown={startCounter}
        onMouseUp={stopCounter}
        onMouseLeave={stopCounter}
        style={elementStyle}
      />
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

That's my version of handling mouse press and hold event in React.

Thanks for your time and see you in the upcoming posts! 😊

ReactJS - Blog posts

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join