react-menu-aim

    2.0.0 • Public • Published

    ReactMenuAim

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

    中文说明

    Build Status npm version

    ReactMenuAim demo

    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

    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

    Install

    npm i react-menu-aim

    DownloadsWeekly Downloads

    79

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • jasonslyvia