archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

Make useHoverDirty controllable + reuse in useMouse

Browse Source
This commit is contained in:
Ward Oosterlijnck 2019-03-26 18:23:21 +11:00 committed by Va Da
parent 28b5bc97d4
commit 2b3dd239cb
2 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/useHoverDirty.ts
View File

@ -1,8 +1,8 @@
import {useEffect, useState} from 'react';
// kudos: https://usehooks.com/
const useHoverDirty = (ref) => {
if (process.env.NODE_ENV !== 'production') {
const useHoverDirty = (ref, enabled: boolean = true) => {
if (process.env.NODE_ENV === 'development') {
if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
throw new TypeError('useHoverDirty expects a single ref argument.');
}
@ -14,18 +14,18 @@ const useHoverDirty = (ref) => {
const onMouseOver = () => setValue(true);
const onMouseOut = () => setValue(false);
if (ref && ref.current) {
if (enabled && ref && ref.current) {
ref.current.addEventListener('mouseover', onMouseOver);
ref.current.addEventListener('mouseout', onMouseOut);
}
return () => {
if (ref && ref.current) {
if (enabled && ref && ref.current) {
ref.current.removeEventListener('mouseover', onMouseOver);
ref.current.removeEventListener('mouseout', onMouseOut);
}
};
}, []);
}, [enabled, ref]);
return value;
}

33
src/useMouse.ts
View File

@ -1,5 +1,5 @@
import {useState, useEffect, useRef, RefObject} from 'react';
import useToggle from "./useToggle";
import useHoverDirty from "./useHoverDirty";
export interface State {
docX: number;
@ -13,8 +13,14 @@ export interface State {
}
const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): State => {
if (process.env.NODE_ENV === 'development') {
if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
throw new TypeError('useMouse expects a single ref argument.');
}
}
const frame = useRef(0);
const [active, setActive] = useToggle(false);
const isHovered = useHoverDirty(ref, whenHovered);
const [state, setState] = useState<State>({
docX: 0,
docY: 0,
@ -26,23 +32,6 @@ const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): St
elW: 0,
});
useEffect(() => {
const enterHandler = () => setActive(true)
const leaveHandler = () => setActive(false)
if (whenHovered && ref && ref.current) {
ref.current.addEventListener("mouseenter", enterHandler, false);
ref.current.addEventListener("mouseleave", leaveHandler, false);
}
return () => {
if (whenHovered && ref && ref.current) {
ref.current.removeEventListener("mouseenter", enterHandler);
ref.current.removeEventListener("mouseleave", leaveHandler);
}
};
}, [whenHovered, ref]);
useEffect(() => {
const moveHandler = (event: MouseEvent) => {
cancelAnimationFrame(frame.current);
@ -67,17 +56,17 @@ const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): St
});
}
if (active || !whenHovered) {
if (isHovered || !whenHovered) {
document.addEventListener('mousemove', moveHandler);
}
return () => {
if (active || !whenHovered) {
if (isHovered || !whenHovered) {
cancelAnimationFrame(frame.current);
document.removeEventListener('mousemove', moveHandler);
}
};
}, [active, whenHovered, ref])
}, [isHovered, whenHovered, ref])
return state;
}