Naboo's Podracing Misadventure

    react-hook-mighty-mouse
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.31 • Public • Published

    React Mighty Mouse Mighty Mouse

    npm version npm bundle size Build Status

    React hook that tracks mouse events on selected element.

    Demo

    Demos created with React DemoTab 📑

    Install

    npm install 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 },
      },
      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:

    • 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")

    Install

    npm i react-hook-mighty-mouse

    DownloadsWeekly Downloads

    33

    Version

    1.4.31

    License

    MIT

    Unpacked Size

    37.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar