https://github.com/mkosir/react-hook-mighty-mouse
🐭 React hook that tracks mouse events on selected element - zero dependencies
https://github.com/mkosir/react-hook-mighty-mouse
angle coordinates hook location mighty mighty-mouse mouse mouse-tracking react
Last synced: 4 months ago
JSON representation
🐭 React hook that tracks mouse events on selected element - zero dependencies
- Host: GitHub
- URL: https://github.com/mkosir/react-hook-mighty-mouse
- Owner: mkosir
- License: mit
- Created: 2019-10-03T20:30:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-15T12:10:02.000Z (almost 4 years ago)
- Last Synced: 2025-04-01T14:38:29.826Z (7 months ago)
- Topics: angle, coordinates, hook, location, mighty, mighty-mouse, mouse, mouse-tracking, react
- Language: TypeScript
- Homepage: https://mkosir.github.io/react-hook-mighty-mouse
- Size: 10.3 MB
- Stars: 121
- Watchers: 7
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
- fucking-awesome-react-hooks - `react-hook-mighty-mouse`
- awesome-react - react-hook-mighty-mouse - Hook that tracks mouse events on selected element.  (UI Components / Device Input/User Action)
- awesome-react-components - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
- awesome-react-hooks-cn - `react-hook-mighty-mouse`
- awesome-react-components - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
- awesome-react-hooks - `react-hook-mighty-mouse`
- awesome-react-hooks - `react-hook-mighty-mouse`
- awesome-react-components - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
- awesome-react-components - react-hook-mighty-mouse - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
- fucking-awesome-react-components - react-hook-mighty-mouse - 🌎 [demo](mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. (UI Utilities / Device Input)
README
# React Mighty Mouse 
[![npm version][npm-badge]][npm-url]
[![npm bundle size][size-badge]][npm-url]
[![Build Status][build-badge]][build-url]
_React hook that tracks mouse events on selected element._
## Demo
**[Demos](https://mkosir.github.io/react-hook-mighty-mouse)** created with [React DemoTab 📑](https://github.com/mkosir/react-demo-tab)
## Install
```bash
npm install react-hook-mighty-mouse
```
## Features
- Lightweight, zero dependencies 📦
- Supports **mouse** and **touch** events
- Mouse positions 🖱️ - client/page/screen [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--positions)
- Mouse **relative position** to selected element [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--relative-position)
- Mouse **angle** 0-360° 📐 relative to selected element [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--mouse-angle) - Eyes Follow 👀 [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--eyes-follow)
- Track mouse **button** events [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--mouse-buttons)
- Detect when mouse is **hovering** over selected element [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--mouse-over-selected-element)
- Detect keys pressed on the **keyboard** ⌨️ [🔗demo](https://mkosir.github.io/react-hook-mighty-mouse/?path=/story/react-mighty-mouse--keyboard)
## Example
```jsx
import React from 'react';
import useMightyMouse from 'react-hook-mighty-mouse';
const App = () => {
const { position } = useMightyMouse();
return (
Mouse position x:{position.client.x} y:{position.client.y}
);
};
ReactDOM.render(, document.getElementById('root'));
```
## Hook
```js
useMightyMouse(
touchEnabled: boolean = true,
selectedElementId: string | null = null,
selectedElementOffset: { x: number; y: number } = { x: 0, y: 0 }
): Mouse
```
> ▶︎ indicates the default value if there's one
### _Input Params_
**touchEnabled**: _boolean_ ▶︎ `true`
Boolean to enable/disable touch.
**selectedElementId**: _string | null_ ▶︎ `null`
Selected element id.
**selectedElementOffset**: _{ x: number; y: number }_ ▶︎ `{ x: 0, y: 0 }`
Selected element offset object.
### _Return values_
_**Mouse** = {
**position** : {
**client** : { **x** : number | null, **y** : number | null },
**screen** : { **x** : number | null; **y** : number | null },
**page** : { **x** : number | null; **y** : number | null },
},
**buttons** : {
**left** : boolean | null,
**middle** : boolean | null,
**right** : boolean | null,
},
**keyboard** : {
**ctrl** : boolean | null,
**shift** : boolean | null,
**alt** : boolean | null,
},
**eventType** : string | null,
**selectedElement** : {
**position** : { **x** : number | null; **y** : number | null, **angle** : number | null },
**boundingRect** : { **left** : number | null; **top** : number | null, **width** : number | null, **height** : number | null },
**isHover** : boolean
},
}_
## Development
_Easily set up a local development environment!_
Build all the examples and starts storybook server on [localhost:9009](http://localhost:9009):
- clone
- `npm install`
- `npm start`
OR
Clone this repo on your machine, navigate to its location in the terminal and run:
```bash
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
```
Clone project repo that you wish to test with react-hook-mighty-mouse library and run:
```bash
npm install
npm link react-hook-mighty-mouse # link your local copy into this project's node_modules
npm start
```
**Start coding!** 🎉
## Contributing
All contributions are welcome!
## Roadmap
- Add throttle parameter (hook "updating")
[npm-url]: https://www.npmjs.com/package/react-hook-mighty-mouse
[npm-badge]: https://img.shields.io/npm/v/react-hook-mighty-mouse.svg
[size-badge]: https://img.shields.io/bundlephobia/minzip/react-hook-mighty-mouse.svg
[build-badge]: https://travis-ci.com/mkosir/react-hook-mighty-mouse.svg
[build-url]: https://travis-ci.com/mkosir/react-hook-mighty-mouse