神刀安全网

react-aim: Determine Cursor Aim for Triggering Events

React Aim

Determine the cursor aim for triggering mouse events.

Demo

Try the demo here .

react-aim: Determine Cursor Aim for Triggering Events

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(   (props, component) => component.refs.submenu, // target   {     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>     );   } }

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react-aim: Determine Cursor Aim for Triggering Events

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址