ra

react-aim

Determine the cursor aim for triggering mouse events.

Showing:

Popularity

Downloads/wk

1.1K

GitHub Stars

368

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

4.4KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Readme

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

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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial