React Hooks to listen to both mouse down or up and click events with a once called function

Last update: Feb 4, 2022

use-mouse-action Build Status

React Hooks to listen to both mouse down or up and click events with a once called function.

Example

This hook can be used to create fast usable drop-down buttons.

Installation

npm install use-mouse-action

Usage

import useMouseAction from 'use-mouse-action';

const Component = () => {
  const props = useMouseAction({
    onAction: () => console.log('You clicked or mouse downed me!'),
    down: true
  });

  return (
    <button type="button" {...props}>
      Click me fast!
    </button>
  );
};

Hooks

This library provides three React Hooks:

  • useMouseAction
  • useMouseDown
  • useMouseUp

They all want the same parameter: either the callback function or an options object with the callback function in the onAction parameter.

They all return an object of event listeners to add on the element.

import { useMouseDown } from 'use-mouse-action';

/** ... */

const props = useMouseDown(() => toggle);
return (<button type="button" {...props}>Click me</button>);

The useMouseDown and useMouseUp are both a shortcut to respectively set the down and up option to true.

Options

  • onAction (required): The function called on custom click triggered.
  • down (default: false): If the element should listen to mousedown event.
  • up (default: false): If the element should listen to mouseup event.
  • touch (default: false): If the element should listen to touch equivalent events.
  • timeout (default: 10): Short timeout in milliseconds to prevents multiple events.

You can provide functions that should listen to each event with theses options:

  • onClick
  • onMouseDown
  • onMouseUp
  • onTouchStart
  • onTouchEnd

Why

Sometimes, we would like to listen to mousedown or 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 mousedown/mouseup and 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.

Build

npm run build

Test

npm test

License

This project is licensed under the MIT license.

GitHub

https://github.com/dimitrinicolas/use-mouse-action
Comments
  • 1. Bump ini from 1.3.5 to 1.3.7

    Bumps ini from 1.3.5 to 1.3.7.

    Commits
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-12-11 02:45
  • 2. Bump http-proxy from 1.17.0 to 1.18.1

    Bumps http-proxy from 1.17.0 to 1.18.1.

    Changelog

    Sourced from http-proxy's changelog.

    v1.18.1 - 2020-05-17

    Merged

    1.18.0 - 2019-09-18

    Merged

    Commits

    • [dist] New test fixtures. 7e4a0e5
    • [dist] End of an era. a9b09cc
    • [dist] Version bump. 1.18.0 9bbe486
    • [fix] Latest versions. 59c4403
    • [fix test] Update tests. dd1d08b
    • [dist] Update dependency ws to v3 [SECURITY] b00911c
    • [dist] .gitattributes all the things. fc93520
    • [dist] Regenerate package-lock.json. 16d4f8a
    Commits
    • 9b96cd7 1.18.1
    • 335aeeb Skip sending the proxyReq event when the expect header is present (#1447)
    • dba3966 Remove node6 support, add node12 to build (#1397)
    • 9bbe486 [dist] Version bump. 1.18.0
    • 6e4bef4 Added in auto-changelog module set to keepachangelog format (#1373)
    • d056241 fix 'Modify Response' readme section to avoid unnecessary array copying (#1300)
    • 244303b Fix incorrect target name for reverse proxy example (#1135)
    • b4028ba Fix modify response middleware example (#1139)
    • 77a9815 [dist] Update dependency async to v3 (#1359)
    • c662f9e Fix path to local http-proxy in examples. (#1072)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-09-07 14:48
  • 3. Bump elliptic from 6.4.1 to 6.5.3

    Bumps elliptic from 6.4.1 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-07-30 12:32
  • 4. Bump acorn from 6.1.1 to 6.4.1

    Bumps acorn from 6.1.1 to 6.4.1.

    Commits
    • 9a2e9b6 Mark version 6.4.1
    • 90a9548 More rigorously check surrogate pairs in regexp validator
    • df0cf1a Mark version 6.4.0
    • 5303412 Also export Parser via Parser.acorn
    • efe273e give token types and etc to plugins
    • ac6decb Mark version 6.3.0
    • 7e9817d Allow sourceType: module even with ecmaVersion < 6
    • e2b8cc0 Fix broken parsing of new expressions when allowReserved=="never"
    • 1555c52 Update acorn.d.ts
    • 77c20fa Mark version 6.2.1
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-03-14 03:58
  • 5. Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2019-08-29 00:50
  • 6. Bump eslint-utils from 1.3.1 to 1.4.2

    Bumps eslint-utils from 1.3.1 to 1.4.2.

    Commits
    • 4e1bc07 1.4.2
    • e4cb014 🐛 add null test
    • 230a4e2 1.4.1
    • 08158db 🐛 fix getStaticValue security issue
    • 587cca2 🐛 fix getStringIfConstant to handle literals correctly
    • c119e83 🐛 fix getStaticValue to handle bigint correctly
    • 531b16f 🔖 1.4.0
    • 276303d ⚒ upgrade rollup
    • cb518c7 🐛 fix hasSideEffect false negative
    • aac472e 🐛 fix isParenthesized had false positive on ImportExpression (fixes #1)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2019-08-26 20:32
A React hook for tracking user interaction with the DOM elements, combining 🖱 mouse events and ⌨️ keyboard focus

useHoverState() The one aware of keyboard navigation as well ?? npm i use-hover-state A React hook for tracking user interaction with the DOM elements

May 10, 2022
🐭 React hook that tracks mouse events on selected element - zero dependencies
🐭  React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

May 30, 2022
React hook to detect click or touch events outside an element.

React hook to detect click or touch events React hook useClickAway() that reacts to clicks outside the bound element, and calls the expression that is

Apr 16, 2022
😎 🖱 React hook to listen for clicks outside of the component(s).
😎 🖱 React hook to listen for clicks outside of the component(s).

REACT COOL ONCLICKOUTSIDE This is a React hook to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for U

Jun 17, 2022
Understand how React-hook really behaves, once and for all!
Understand how React-hook really behaves, once and for all!

Understand how React-hook really behaves, once and for all!

Jun 15, 2022
Tiny React Click Away Listener built with React Hooks
Tiny React Click Away Listener built with React Hooks

~700B React Click Away Listener Installation yarn add react-click-away-listener It's quite small in size. It's built with TypeScript. It supports both

Jun 7, 2022
A new way of Function Components without Hooks
A new way of Function Components without Hooks

React Split Components (RiC) A new way of Function Components without Hooks

Jun 14, 2022
A React component that decorates its children with mouse and touch coordinates relative to itself.

react-cursor-position react-cursor-position is a primitive component for composing UI features that require notification of cursor or touch position c

Apr 17, 2022
A React hook to detect click outside of the target(s) elements

React Hook useClickOutside This is a React hook to detect click outside of the t

May 25, 2022
A React.js hook enabling easy management of various click types(single, double & long) written in TypeScript.
A React.js hook enabling easy management of various click types(single, double & long) written in TypeScript.

react-clicks react-clicks is a React.js hook enabling easy management of various click types(single, double & long click) . Written in TypeScript.

Apr 3, 2022
React hook to execute and watch async function

react-async-watcher React hook to execute and watch async function Introduction This package is made for handle asynchronous tasks, such as backend ap

Apr 15, 2021
Advanced fetcher function npm package for React SWR

swr-fetcher Advanced OOP principles fetcher npm package for React SWR based in axios. In fact, you can use swr even if you don't use it. In this case,

Nov 16, 2021
React hook which gives a smooth scrolling function.

use-smooth-scroll React hook which gives a smooth scrolling function. Example (Codesandbox) const Example = () => { const ref = React.useRef() con

Jun 3, 2022
A library for emitting and listening to events in a React application.

react-event-hook A library for emitting and listening to events in a React application. The idea for this package came from a Tweet by @pedronauck. In

May 26, 2022
A custom React Hook for implementing a calendar with events
A custom React Hook for implementing a calendar with events

react-use-calendar Custom React Hook for implementing a calendar with events Installation npm install react-use-calendar --save Demo Usage import Rea

Jun 16, 2022
Happy events website built with react

Happy events live website link: https://assignment-11-holiday-planner.web.app/ Features: 1. A holiday event booking website which offers different eve

Nov 22, 2021
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development ?? Live playground here ?? ???? English

Jun 22, 2022
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks
Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks

?? Advanced React Hooks ?? EpicReact.Dev Learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks. W

Mar 15, 2022
👩‍🍳 A React Hooks utility library containing popular customized hooks
👩‍🍳 A React Hooks utility library containing popular customized hooks

React Recipes A React Hooks utility library containing popular customized hooks What's your favorite dish? npm i react-recipes --save yarn add react-r

Jun 16, 2022