ReactMenuAim

A React Mixin makes your menu works as magical as Amazon's implementation, this repo is heavily inspired by jQuery-menu-aim.

中文说明

If you tend to support React v0.13, please use [email protected] which is the latest compatible version.

How to use

Live Demo

You can also checkout ./demo folder find out the simple & stragiht demo usage, or here's a quick look.

var React = require('react');
var ReactMenuAim = require('react-menu-aim');

var Menu = React.createClass({
  mixins: [ReactMenuAim],

  componentWillMount: function() {
    // Config ReactMenuAim here
    this.initMenuAim({
      submenuDirection: 'right',
      menuSelector: '.menu'
    });
  },

  // This is your true handler when a menu item is going to be active
  handleSwitchMenuIndex: function(index) {
    // ...
  },

  // `this.handleMouseLeaveMenu` and `this.handleMouseEnterRow` are provided by ReactMenuAim,
  // you can provide your own handler bound to them
  render: function() {
    return (
      <div className="menu-container">
        <ul className="menu" onMouseLeave={this.handleMouseLeaveMenu}>
          <li className="menu-item" onMouseEnter={this.handleMouseEnterRow.bind(this, 0, this.handleSwitchMenuIndex)}>Menu Item 1</li>
          <li className="menu-item" onMouseEnter={this.handleMouseEnterRow.bind(this, 1, this.handleSwitchMenuIndex)}>Menu Item 2</li>
        </ul>
      </div>
    );
  }
});

Event handler

The following event handlers are provided by ReactMenuAim.

DO NOT call them directly, pass them as event handler in component's render method.

handleMouseLeaveMenu

This event handler should be called when mouse is leaving the menu.

Arguments

1. handler (Function) You can provide your own handler when mouse leave menu
2. e (Object) React's synthetic event

handleMouseEnterRow

This event handler should be called when mouse is entering a menu item.

Arguments

1. rowIdentifier (Any) The identifier you provided to identify a row, usually it's row index or something, will be passed to your handler when a menu is going to be activated.
2. handler (Function) You can provide your own handler when mouse enter a row
3. e (Object) React's synthetic event

Configuration

To configure ReactMenuAim, you should call this.initMenuAim in your React component with your options.

  componentWillMount: function() {
    this.initMenuAim({
      // options
    });
  }

submenuDirection

Type: string Default: 'right'

Indicates the direction of submenu.

menuSelector

Type: string Default: '*'

Determine the position and offset of menu container. This selector should be constrained on the very exact menu area(which we are switching), not including submenu area.

delay

Type: number Default: 300

When user is moving mouse and have a tendency of viewing submenu, how many ms to wait before making next move.

tolerance

Type: number Default: 75

The larger, the submenu is more likely to show.

Scripts

$ npm install
$ npm run test
$ npm run build
$ npm run watch

License

MIT