React - mouse button press and hold example
Tags: react, webdev, javascript, tutorial
Published: 2021-04-12 19:19:45

Hi there! 👋😊

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

__Before we start__, I would highly recommend you to check out the __runnable example__ for the solution on our website:
[React - mouse button press and hold example](https://dirask.com/posts/pzrAap)

In the beginning, 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtt7saxvvl8ea6jm7k9q.gif)

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 the `counter`,
- `onMouseUp` / `onMouseLeave` events  - to stop incrementing the `counter`,
- `useEffect` hook - to stop the `counter` when App component is destroyed.

Practical example:
```jsx
import React from 'react';

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

export default App;
```
You can run this example [here](https://dirask.com/posts/pzrAap)

That's my version of handling mouse press and hold event in React.
Let me know what you think in the comments. 💬
Maybe you have a better solution? I would be glad if you share it with me! 😊

Thanks for your time and see you in the next posts! 🔥
_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)

You can also join our [facebook group](https://www.facebook.com/groups/125343696143974) where we share  coding tips and tricks with others! 🔥