Determine the cursor aim for triggering mouse events.

Last update: Mar 5, 2022

React Aim

Build Status Code Climate Dependency Status devDependency Status npm downloads npm version Gitter

Determine the cursor aim for triggering mouse events.

Demo

Try the demo here.

Example

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({
  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>
    );
  }
}

GitHub

https://github.com/gabrielbull/react-aim
Comments
  • 1. Bugfix to calculating top location of a subnav that is higher on the page than parent

    https://github.com/gabrielbull/react-aim/blob/510dba1332151040810de444c430454143e3c152/src/corners.js#L16

    We've seen a bug where when a sub-nav is located higher on the page than the parent, the aim target isn't calculated correctly and onMouseEnter fires on all the parent siblings. This fixes that:

    Change line 16 of corners.js to:

    ver = inside(source.top, target.top, source.top + target.height);

    And everything works as intended.

    Reviewed by nathanyarnold at 2018-06-11 19:09
  • 2. support for other input methods

    Just an idle thought, but have you considered how this might be expanded to support input methods besides the pointer? A keyboard user tabbing inexorably towards a target might be a good indicator of their intent..

    Reviewed by macgyver at 2016-06-10 13:40
  • 3. feat: changed source and target refs to callbacks

    In this PR

    • Changed source wrappedComponent ref to a callback ref assignment
    • Changed target wrappedComponent ref to a callback ref assignment

    Note:

    In react 16 the ref string assignment was not binding the parent to the ref.

    Reviewed by codyspate at 2018-08-16 18:37
  • 4. Configurable tolerance

    Thanks a lot for this library! I really appreciate how flexible it can be used for different use cases.

    I was wondering if it could be possible to allow the consumer of the component to configure the level of tolerance?

    E.g. in your menu example: When hovering over the menu, the items change their state very responsively when moving the mouse straight up and down or of course slightly to the left. However, if the mouse is moved slightly to the right the menu isn't so responsive anymore. Of course, there needs to be a boundary somewhere, but it would be nice if this was configurable.

    Thanks in advance!

    Reviewed by amannn at 2017-02-10 15:50
  • 5. Distinguish first source in a component tree with nested sources

    Hi, I have multiple nested react-aim sources in a component tree and I'm trying to pass an "over = true" prop to the first react-aim source under the cursor. By first I mean the element deepest in the DOM.

    I'm not sure if this is currently possible, although I'm still wrapping my head around the code. Is there a simple way to accomplish this?

    Reviewed by sseppola at 2016-12-12 22:26
  • 6. create an aim plugin

    I don't really see why this needs to use react (unless I'm missing something). Would it make sense to abstract this away to an aim plugin and have a minimal react-aim wrapper?

    Reviewed by kolodny at 2016-06-10 00:38
Related tags
React component to handle keyboard events :key:

react-key-handler ?? React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Apr 18, 2022
A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

Feb 15, 2022
React-cursor-chat - A react component for cursor chat
React-cursor-chat - A react component for cursor chat

@yomo/react-cursor-chat ?? Introduction A react component for cursor chat Press

May 5, 2022
⚡️The Fullstack React Framework — built on Next.js
⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

May 15, 2022
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

Oct 12, 2021
☯️ React hook to determine if you are on the server, browser, or react native
☯️ React hook to determine if you are on the server, browser, or react native

useSSR ☯️ React hook to determine if you are on the server, browser, or react native Need to know when you're on the server, in the browser or in reac

Apr 15, 2022
Component-wrapper to determine and report children elements height
Component-wrapper to determine and report children elements height

react-height Component-wrapper to determine and report children elements height Goals react-height keeps things simple, therefore it does not support

Mar 21, 2022
Native modules to determine if a location is within defined geographical boundaries using Google Geometry library
Native modules to determine if a location is within defined geographical boundaries using Google Geometry library

react-native-geo-fencing Native modules to determine if a location is within defined geographical boundaries using Google Geometry library for ios and

May 15, 2022
🐭 React hook that tracks mouse events on selected element - zero dependencies
🐭  React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

May 10, 2022
React Hooks to listen to both mouse down or up and click events with a once called function

use-mouse-action React Hooks to listen to both mouse down or up and click events with a once called function. Example This hook can be used to create

Feb 4, 2022
🐭 React hook that tracks mouse events on selected element - zero dependencies
🐭  React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

May 10, 2022
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.
@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

??Bread n butter utility for component-tied mouse/touch gestures in React

May 13, 2022
A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.

A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.

Jan 16, 2022
A React hook for tracking user interaction with the DOM elements, combining 🖱 mouse events and ⌨️ keyboard focus

useHoverState() The one aware of keyboard navigation as well ?? npm i use-hover-state A React hook for tracking user interaction with the DOM elements

May 9, 2022
An edit mask for React based on regular expression syntax with cursor handling.

react-editmask An edit mask for React based on regular expression syntax with cursor handling. Installation react-editmask requires React 0.14 or late

Jul 2, 2019
The cursor is the heart of any interaction with the web. Why not take it to the next level? 🚀
The cursor is the heart of any interaction with the web. Why not take it to the next level? 🚀

Installation License Open source license Commercial license Usage Public API methods React Prefers Reduced Motion Contributions Special thanks Install

May 13, 2022
💬 lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence
 💬 lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence

cursor-chat ?? lightweight (29.59kB) cursor chat à la Figma for digital co-existing + presence As a warning, this library is for experimental purposes

May 15, 2022
A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.
A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Appo Music About Appo Music is a full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features

May 13, 2022
Fetch with checks: a wrapper to aim to detect known coding errors in advance

fetch_with_checks Status: Works The fetch spec: https://developer.mozilla.org/en

Dec 18, 2021
Urban Eatery: An app which is made with an aim of bringing back traditional food
Urban Eatery: An app which is made with an aim of bringing back traditional food

Urban Eatery "Good Food for Good Moments" Urban Eatery is an app where you can o

Apr 20, 2022