Handle mouse down/up and click events once with React Hooks

README.md

Handle mouse down/up and click events once with React Hooks

The issue

Sometimes you need to make a button clickable with click and mouse down or mouse up actions.

The first solution that comes to mind would be to add only one event listener onMouseDown/onMouseUp but without an onClick event listener the element is not accessible anymore. It's now hard to click for people with disabilities or with keyboard navigation.

If we set both onMouseDown/onMouseUp and onClick event listeners, the common click handler function would be called twice with a mouse. So we have

We need to handle either one event or the other but not both, knowing that it can happen that only one of them is activated.

Improvement

This piece of code is subject to improvement, it needs to:

• Handle touch devices events onTouchStart and onTouchEnd.
• Transcribe it in a hooks library. Done: github.com/dimitrinicolas/use-mouse-action

mouse-down.jsx

const onClick = () => { /** Handle mousedown or click */ }

const [mouseDown, setMouseDown] = useState(false);

useEffect(() => {
  const handleDocumentMouseUp = event => {
    if (event.button !== 2) {
      setTimeout(() => setMouseDown(false), 10);
    }
  };

  document.addEventListener('mouseup', handleDocumentMouseUp);
  return () => {
    document.removeEventListener('mouseup', handleDocumentMouseUp);
  };
}, []);

const handleMouseDown = event => {
  if (event.button !== 2) {
    setMouseDown(true);
    toggle();
  }
};

const handleClick = useCallback(() => {
  if (!mouseDown) {
    onClick();
  }
}, [mouseDown]);

return (
  <button onMouseUp={handleMouseUp} onClick={handleClick}>
    Click me
  </button>
);

mouse-up.jsx

const onClick = () => { /** Handle mousedown or click */ }

const [clickTiggered, setClickTriggered] = useState(false);

const handleMouseUp = event => {
  if (event.button !== 2) {
    setClickTriggered(true);
    setTimeout(() => setClickTriggered(false), 10);
    onClick();
  }
};

const handleClick = useCallback(() => {
  if (!clickTiggered) {
    onClick();
  }
}, [clickTiggered]);

return (
  <button onMouseUp={handleMouseUp} onClick={handleClick}>
    Click me
  </button>
);

can you give code for mouse down. that will be best!!!

can you give code for mouse down. that will be best!!!

Have you seen this repository: https://github.com/dimitrinicolas/use-mouse-action ?

It is the evolution of this gist exploration.

Thanks!!! but I was talking about handle mouse down or click logic code.

I'm sorry but I didn't understand what you're asking for. Le sam. 6 mars 2021 à 17:17, KIranMehta075 <notifications@github.com> a écrit :

…

***@***.**** commented on this gist. ------------------------------ Thanks!!! but I was talking about handle mouse down or click logic code. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/f8768ae7b664b6259eb923157b16d4fc#gistcomment-3655857>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAILFX7T4KVI5CFYJBPMJI3TCJIQZANCNFSM4YW2PS5Q> .

const onClick = () => { /** Handle mousedown or click */ }

const [mouseDown, setMouseDown] = useState(false);

useEffect(() => {
const handleDocumentMouseUp = event => {
if (event.button !== 2) {
setTimeout(() => setMouseDown(false), 10);
}
};

document.addEventListener('mouseup', handleDocumentMouseUp);
return () => {
document.removeEventListener('mouseup', handleDocumentMouseUp);
};
}, []);

const handleMouseDown = event => {
if (event.button !== 2) {
setMouseDown(true);
toggle();
}
};

const handleClick = useCallback(() => {
if (!mouseDown) {
onClick();
}
}, [mouseDown]);

return (

Click me

);
I was talking about this code. can you give Handle mousedown code?

You'll have to put your own logic into onClick function.

I really encourage you tu use this library instead of this gist code: https://github.com/dimitrinicolas/use-mouse-action