Skip to content
React hook that tracks mouse events on selected element 🐭
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Latest commit 8a8b557 Oct 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook update storybook Oct 9, 2019
src add selected element offset param Oct 15, 2019
stories update story Oct 16, 2019
.eslintrc.json refactor Oct 11, 2019
.gitignore initial commit Oct 3, 2019
.prettierrc initial commit Oct 3, 2019
.travis.yml initial commit Oct 5, 2019
LICENSE initial commit Oct 3, 2019
README.md add selected element offset param Oct 15, 2019
demo.gif update readme Oct 11, 2019
mighty-mouse.png update readme Oct 3, 2019
package-lock.json add angle Oct 11, 2019
package.json add selected element offset param Oct 15, 2019
rollup.config.js initial commit Oct 3, 2019
tsconfig.json initial commit Oct 3, 2019

README.md

React Mighty Mouse Mighty Mouse

npm version npm bundle size Build Status

React hook that tracks mouse events on selected element.

Demo

Live demo & Code examples

Install

  • npm npm install react-hook-mighty-mouse
  • yarn yarn add react-hook-mighty-mouse

Features

  • Lightweight, zero dependencies 📦
  • Supports mouse and touch events
  • Mouse positions 🖱️ - client/page/screen 🔗demo
  • Mouse relative position to selected element 🔗demo
  • Mouse angle 0-360° 📐 relative to selected element 🔗demo - Eyes Follow 👀 🔗demo
  • Track mouse button events 🔗demo
  • Detect when mouse is hovering over selected element 🔗demo
  • Detect keys pressed on the keyboard ⌨️ 🔗demo

Example

import React from 'react';
import useMightyMouse from 'react-hook-mighty-mouse';

const App = () => {
  const { position } = useMightyMouse();
  return (
    <div>
      Mouse position x:{position.client.x} y:{position.client.y}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Hook

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 },
  },
  positionRelative : { x : number | null; y : number | null, angle : number | null },
  buttons : {
    left : boolean | null,
    middle : boolean | null,
    right : boolean | null,
  },
  keyboard : {
    ctrl : boolean | null,
    shift : boolean | null,
    alt : boolean | null,
  },
  isHover : boolean
}

Development

Easily set up a local development environment!

Build all the examples and starts storybook server on localhost:9009:

  • clone
  • npm install
  • npm start

OR

Clone this repo on your machine, navigate to its location in the terminal and run:

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:

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")
You can’t perform that action at this time.