React Aim
Determine the cursor aim for triggering mouse events.
Demo
Try the demo here.
Installation
npm install react-aim --save
Usage
import React Component from 'react';import target from 'react-aim'; @ { 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'; { return <ul> <Item ="item 1"/> <Item ="item 2"/> <Item ="item 3"/> <Item ="item 4"/> <Item ="item 5"/> </ul> ; }
Menu Item
import React Component PropTypes from 'react';import source from 'react-aim';import Submenu from './path/to/submenu'; @ { ; thisstate = over: false ; } { let submenu; if thisstateover submenu = <Submenu ="submenu"/>; return <li> thispropsname submenu </li> ; }
Submenu
import React Component PropTypes from 'react';import target from 'react-aim'; @ { return <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> ; }