react-mouse-pointer-tools

    0.1.7 • Public • Published

    react-mouse-pointer-tools

    npm version

    Here's a link to the project on GitHub: https://github.com/koalabears/react-mouse-pointer-tools

    react-mouse-pointer-tools is a react component that provides a toolkit for tracking the pointer position of the mouse. The toolkit provides both the x and y coordinates printed beside the pointer as well as optional horizontal and vertical rules for precision tracking. The colour of the lines and coordinates are customisable with the props see the example use case below

    gif

    Example of how to use - add this code to your main.js file

    var React         = require('react');
    var ReactDOM      = require('react-dom');
    var PointerTools  = require('react-mouse-pointer-tools');
    var rootElement   = document.body.getElementById("wrapper");
     
    ReactDOM.render(
      <PointerTools color="pink" showRulers={true} />,
      rootElement
    );
    Prop Default Type Description
    showRulers true boolean displays/hides rulers
    color 'black' string changes the colour of rulers and coordinates

    Why would you use it?

    • Styling tool for web app layout
    • User screen tracking

    Install

    npm i react-mouse-pointer-tools

    DownloadsWeekly Downloads

    11

    Version

    0.1.7

    License

    MIT

    Last publish

    Collaborators

    • koalabears