React Hooks to listen to both mouse down or up and click events with a once called function.
This hook can be used to create fast usable drop-down buttons.
npm install use-mouse-action
import useMouseAction from 'use-mouse-action';const Component =const props =;return<button ="button" >Click me fast!</button>;;
This library provides three React Hooks:
They all want the same parameter: either the callback function or an options
object with the callback function in the
They all return an object of event listeners to add on the element.
import useMouseDown from 'use-mouse-action';/** ... */const props = ;return <button ="button" >Click me</button>;
useMouseUp are both a shortcut to respectively set the
up option to
onAction(required): The function called on custom click triggered.
false): If the element should listen to mousedown event.
false): If the element should listen to mouseup event.
false): If the element should listen to touch equivalent events.
10): Short timeout in milliseconds to prevents multiple events.
You can provide functions that should listen to each event with theses options:
Sometimes, we would like to listen to
mouseup events on
buttons, but these events are difficult to call by disabled peoples or by
people that navigates with their keyboard.
We would like to listen both to
click event, but we
now must to make sure that our action is triggered only once.
Moreover, we would add on top of that the listening of touch events.
That's why I created this React Hooks library.
npm run build
This project is licensed under the MIT license.