Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dimitrinicolas/use-mouse-action
React Hooks to listen to both mouse down or up and click events with a once called function
https://github.com/dimitrinicolas/use-mouse-action
a11y accessibility hooks react react-hooks
Last synced: 3 months ago
JSON representation
React Hooks to listen to both mouse down or up and click events with a once called function
- Host: GitHub
- URL: https://github.com/dimitrinicolas/use-mouse-action
- Owner: dimitrinicolas
- License: mit
- Created: 2019-03-08T17:57:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-11T02:45:49.000Z (about 4 years ago)
- Last Synced: 2024-10-02T15:18:44.817Z (3 months ago)
- Topics: a11y, accessibility, hooks, react, react-hooks
- Language: JavaScript
- Homepage: https://dimitrinicolas.github.io/use-mouse-action/example/
- Size: 521 KB
- Stars: 23
- Watchers: 3
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-mouse-action`
- awesome-react-hooks-cn - `use-mouse-action`
- awesome-react-hooks - `use-mouse-action`
- awesome-react-hooks - `use-mouse-action`
README
# use-mouse-action [![Build Status][travis badge]][travis link]
React Hooks to listen to both mouse down or up and click events with a once called function.
## [Example](http://dimitrinicolas.github.io/use-mouse-action/example/)
This hook can be used to create fast usable drop-down buttons.
## Installation
```bash
npm install use-mouse-action
```
## Usage
```jsx
import useMouseAction from 'use-mouse-action';
const Component = () => {
const props = useMouseAction({
onAction: () => console.log('You clicked or mouse downed me!'),
down: true
});
return (
Click me fast!
);
};
```
## 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.
```jsx
import { useMouseDown } from 'use-mouse-action';
/** ... */
const props = useMouseDown(() => toggle);
return (Click me);
```
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
```bash
npm run build
```
## Test
```bash
npm test
```
## License
This project is licensed under the [MIT license](LICENSE).
[travis badge]: https://travis-ci.org/dimitrinicolas/use-mouse-action.svg?branch=master
[travis link]: https://travis-ci.org/dimitrinicolas/use-mouse-action