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 react-menu-aim@0.1.1 which is the latest compatible version.
How to use
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
- handler (Function) You can provide your own handler when mouse leave menu
- e (Object) React's synthetic event
handleMouseEnterRow
This event handler should be called when mouse is entering a menu item.
Arguments
- 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.
- handler (Function) You can provide your own handler when mouse enter a row
- 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