Skip to content

Latest commit

 

History

History
36 lines (26 loc) · 1.56 KB

README.md

File metadata and controls

36 lines (26 loc) · 1.56 KB

react-mouse-pointer-tools

npm version

GitHub: https://github.com/koalabears/react-mouse-pointer-tools
npm: https://www.npmjs.com/package/react-mouse-pointer-tools
react-components: http://react-components.com/component/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 want to use it?

  • Styling tool for web app layout
  • User screen tracking
  • Potential for gamifying