{"id":13450815,"url":"https://github.com/dimitrinicolas/use-mouse-action","last_synced_at":"2025-04-11T18:10:52.091Z","repository":{"id":53344954,"uuid":"174584321","full_name":"dimitrinicolas/use-mouse-action","owner":"dimitrinicolas","description":"React Hooks to listen to both mouse down or up and click events with a once called function","archived":false,"fork":false,"pushed_at":"2020-12-11T02:45:49.000Z","size":533,"stargazers_count":23,"open_issues_count":8,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T15:47:12.834Z","etag":null,"topics":["a11y","accessibility","hooks","react","react-hooks"],"latest_commit_sha":null,"homepage":"https://dimitrinicolas.github.io/use-mouse-action/example/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimitrinicolas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-08T17:57:37.000Z","updated_at":"2023-03-22T19:19:51.000Z","dependencies_parsed_at":"2022-08-29T14:31:55.404Z","dependency_job_id":null,"html_url":"https://github.com/dimitrinicolas/use-mouse-action","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fuse-mouse-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fuse-mouse-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fuse-mouse-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Fuse-mouse-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimitrinicolas","download_url":"https://codeload.github.com/dimitrinicolas/use-mouse-action/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456365,"owners_count":21106603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","hooks","react","react-hooks"],"created_at":"2024-07-31T07:00:38.845Z","updated_at":"2025-04-11T18:10:52.067Z","avatar_url":"https://github.com/dimitrinicolas.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# use-mouse-action [![Build Status][travis badge]][travis link]\n\nReact Hooks to listen to both mouse down or up and click events with a once called function.\n\n## [Example](http://dimitrinicolas.github.io/use-mouse-action/example/)\n\nThis hook can be used to create fast usable drop-down buttons.\n\n## Installation\n\n```bash\nnpm install use-mouse-action\n```\n\n## Usage\n\n```jsx\nimport useMouseAction from 'use-mouse-action';\n\nconst Component = () =\u003e {\n  const props = useMouseAction({\n    onAction: () =\u003e console.log('You clicked or mouse downed me!'),\n    down: true\n  });\n\n  return (\n    \u003cbutton type=\"button\" {...props}\u003e\n      Click me fast!\n    \u003c/button\u003e\n  );\n};\n```\n\n## Hooks\n\nThis library provides three React Hooks:\n\n- `useMouseAction`\n- `useMouseDown`\n- `useMouseUp`\n\nThey all want the same parameter: either the callback function or an options\nobject with the callback function in the `onAction` parameter.\n\nThey all return an object of event listeners to add on the element.\n\n```jsx\nimport { useMouseDown } from 'use-mouse-action';\n\n/** ... */\n\nconst props = useMouseDown(() =\u003e toggle);\nreturn (\u003cbutton type=\"button\" {...props}\u003eClick me\u003c/button\u003e);\n```\n\nThe `useMouseDown` and `useMouseUp` are both a shortcut to respectively set the `down` and `up` option to `true`.\n\n### Options\n\n- `onAction` (required): The function called on custom click triggered.\n- `down` (default: `false`): If the element should listen to mousedown event.\n- `up` (default: `false`): If the element should listen to mouseup event.\n- `touch` (default: `false`): If the element should listen to touch equivalent\nevents.\n- `timeout` (default: `10`): Short timeout in milliseconds to prevents multiple\nevents.\n\nYou can provide functions that should listen to each event with theses options:\n\n- `onClick`\n- `onMouseDown`\n- `onMouseUp`\n- `onTouchStart`\n- `onTouchEnd`\n\n## Why\n\nSometimes, we would like to listen to `mousedown` or `mouseup` events on\nbuttons, but these events are difficult to call by disabled peoples or by\npeople that navigates with their keyboard.\n\nWe would like to listen both to `mousedown`/`mouseup` and `click` event, but we\nnow must to make sure that our action is triggered only once.\n\nMoreover, we would add on top of that the listening of touch events.\n\nThat's why I created this React Hooks library.\n\n## Build\n\n```bash\nnpm run build\n```\n\n## Test\n\n```bash\nnpm test\n```\n\n## License\n\nThis project is licensed under the [MIT license](LICENSE).\n\n[travis badge]: https://travis-ci.org/dimitrinicolas/use-mouse-action.svg?branch=master\n[travis link]: https://travis-ci.org/dimitrinicolas/use-mouse-action\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Fuse-mouse-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitrinicolas%2Fuse-mouse-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Fuse-mouse-action/lists"}