Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

gabrielbull/react-aim

Repository files navigation

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>
    );
  }
}