Repository files navigation

React hook that tracks mouse events on selected element.

Demos created withReact DemoTab 📑

npm install react-hook-mighty-mouse

• Lightweight, zero dependencies 📦
• Supportsmouse andtouch events
• Mouse positions 🖱️ - client/page/screen🔗demo
• Mouserelative position to selected element🔗demo
• Mouseangle 0-360° 📐 relative to selected element🔗demo - Eyes Follow 👀🔗demo
• Track mousebutton events🔗demo
• Detect when mouse ishovering over selected element🔗demo
• Detect keys pressed on thekeyboard ⌨️🔗demo

importReactfrom'react';importuseMightyMousefrom'react-hook-mighty-mouse';constApp=()=>{const{ position}=useMightyMouse();return(<div>      Mouse position x:{position.client.x} y:{position.client.y}</div>);};ReactDOM.render(<App/>,document.getElementById('root'));

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

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.

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
  },
}

Easily set up a local development environment!

Build all the examples and starts storybook server onlocalhost:9009:

• clone
• npm install
• npm start

OR

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

npm installnpm link# link your local repo to your global packagesnpm 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 installnpm link react-hook-mighty-mouse# link your local copy into this project's node_modulesnpm start

Start coding! 🎉

All contributions are welcome!

• Add throttle parameter (hook "updating")