Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
@antonioru antonioru useDrag ac5a719 Jan 13, 2020
1 contributor

Users who have contributed to this file

100 lines (75 sloc) 2.86 KB

useMouse

Returns an array where the first item is the mouse state from useMouseState and the second item is the object of handler setters from useMouseEvents.

It is intended as a shortcut to those hooks.

Why? πŸ’‘

  • allow to easily receive the mouse position
  • takes care of adding the mouse events listeners globally or to the defined target
  • takes care of cleaning the listener when the component will unmount
  • allow to perform abstractions on mouse related events

Basic Usage:

Provide a DOM ref as first parameter to useMouse

import { useRef, useState } from 'react';
import { useMouse } from 'beautiful-react-hooks'; 

const MouseReporter = () => {
  const ref = useRef();
  const [ showCoords, setShowCoords] = useState(false);
  const [position, { onMouseEnter, onMouseLeave }] = useMouse(ref); 
  
  onMouseEnter(() => setShowCoords(true));
  onMouseLeave(() => setShowCoords(false));
  
  return (
    <DisplayDemo>
     <div ref={ref}>
       Move mouse over me to get its current coordinates:
       {showCoords && (
         <p>{position.clientX}, {position.clientY}</p>
       )}
     </div>
    </DisplayDemo>
  );
};

<MouseReporter />

Global events

Avoid providing any argument to useMouse

import { useRef, useState } from 'react';
import { useMouse } from 'beautiful-react-hooks'; 

const MouseReporter = () => {
  const ref = useRef();
  const [ mouseIsOver, setMouseHover] = useState(false);
  const [position, { onMouseEnter, onMouseLeave }] = useMouse(ref); 
  
  onMouseEnter(() => setMouseHover(true));
  onMouseLeave(() => setMouseHover(false));
  
  return (
    <DisplayDemo>
     <div ref={ref} style={{background: mouseIsOver ? '#FF4365' : 'white'}}>
       The current mouse coordinates are:
       <p>{position.clientX}, {position.clientY}</p>
     </div>
    </DisplayDemo>
  );
};

<MouseReporter />

Mastering the hook

βœ… When to use

  • If in need to get the mouse current position
  • If in need to abstract some mouse related logic into a custom hooks

πŸ›‘ What not to do

  • You can't use the returned handler setter asynchronously, it will not have any effect but changing the handler possibly leading to bugs in your code.
  • Absolutely avoid using useMouse handler setters to replace the standard mouse handler props.
  • useMouse is meant to be used to abstract more complex hooks that need to control the mouse, for example: a drag n drop hook.
  • Using useMouse handlers instead of the classic props approach it's just as bad as it sounds since you'll lose the React SyntheticEvent performance boost.
  • If you were doing something like the following, please keep doing it:
const MyComponent = (props) => {
  const { mouseDownHandler } = props;
    
  return (
    <div onMouseDown={mouseDownHandler} />
  );
};
You can’t perform that action at this time.