Skip to content
Determine the cursor aim for triggering mouse events.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Added tooltip example Jun 24, 2016
playground Removed PropTypes import from playground Apr 18, 2017
src
test Fixed source handling of mouse leave and enter May 31, 2016
.babelrc Initial commit May 19, 2016
.codeclimate.yml Initial commit May 19, 2016
.editorconfig
.eslintrc.yml
.gitignore Updated dependencies Apr 18, 2017
.npmignore Added typescript definitions Apr 18, 2017
.travis.yml Initial commit May 19, 2016
CHANGELOG.md Release 0.2.2 Jun 15, 2018
LICENSE
README.md Fixed issue with calling findDomNode on unmounted components Jun 24, 2016
example.gif Added demo May 31, 2016
index.d.ts Added typescript definitions Apr 18, 2017
package-lock.json
package.json

README.md

React Aim

Build Status Code Climate Dependency Status devDependency Status npm downloads npm version Gitter

Determine the cursor aim for triggering mouse events.

Demo

Try the demo here.

Example

Installation

npm install react-aim --save

Usage

import React, { Component } from 'react';
import { target } from 'react-aim';

@target({
  mouseEnter: (props, component) => {
    console.log('mouse enter');
  },
  mouseLeave: (props, component) => {
    console.log('mouse leave');
  },
  aimMove: (props, component, distance) => {
    console.log('aim move ' + Math.round(distance * 100)  + '%');
  },
  aimStart: (props, component, distance) => {
    console.log('aim start');
  },
  aimStop: (props, component) => {
    console.log('aim stop');
  }
})
export default class extends Component {
  render() {
    return (
      <div/>
    );
  }
}

Submenu Example

Fire mouse events on menus and submenus that takes into account the user's cursor aim.

Menu

import React, { Component, PropTypes } from 'react';
import MenuItem from './path/to/menuItem';

export default class extends Component {
  render() {
    return (
        <ul>
          <Item name="item 1"/>
          <Item name="item 2"/>
          <Item name="item 3"/>
          <Item name="item 4"/>
          <Item name="item 5"/>
        </ul>
    );
  }
}

Menu Item

import React, { Component, PropTypes } from 'react';
import { source } from 'react-aim';
import Submenu from './path/to/submenu';

@source({
  mouseEnter: (props, component) => component.setState({ over: true }),
  mouseLeave: (props, component) => component.setState({ over: false })
})
export default class extends Component {
  constructor() {
    super();
    this.state = { over: false };
  }

  render() {
    let submenu;
    if (this.state.over) submenu = <Submenu ref="submenu"/>;

    return (
      <li>
        {this.props.name}
        {submenu}
      </li>
    );
  }
}

Submenu

import React, { Component, PropTypes } from 'react';
import { target } from 'react-aim';

@target()
export default class extends Component {
  render() {
    return (
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
    );
  }
}
You can’t perform that action at this time.