Measure distance between your mouse and object to make an interactive user interface

Examples

Demo

Install

npm install --save mezrmouse

Usage

import React, { Component } from 'react'

import Measure from 'mezrmouse'

class Example extends Component {
  render () {
    return (
      <Measure distance={100} onCloseUp={(distance) => this.distance = distance}>
        <button>Click me</button>
      </Measure>
    )
  }
}

Properties

Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- distance|number|yes|| The distance the mouse will be from the node so onCloseUp (func) will trigger onCloseUp|func|no|| Triggered when the mouse is close to the node - retunes distance by percentages

License

Mezrmouse is freely distributable under the terms of the MIT license.