diff --git a/src/__stories__/useMouse.story.tsx b/src/__stories__/useMouse.story.tsx index 00f78ca3..1ed753c3 100644 --- a/src/__stories__/useMouse.story.tsx +++ b/src/__stories__/useMouse.story.tsx @@ -6,7 +6,7 @@ import ShowDocs from '../util/ShowDocs'; const Demo = () => { const [whenHovered, toggleWhenHovered] = useToggle(false); const ref = React.useRef(null); - const state = useMouse(ref, whenHovered) + const state = useMouse(ref, {whenHovered, bound: true}) return ( <> diff --git a/src/useMouse.ts b/src/useMouse.ts index 7e9d948d..d01ae034 100644 --- a/src/useMouse.ts +++ b/src/useMouse.ts @@ -12,7 +12,12 @@ export interface State { elW: number; } -const useMouse = (ref: RefObject, whenHovered: boolean = false): State => { +export interface UseMouseOptions { + whenHovered?: boolean; + bound?: boolean; +} + +const useMouse = (ref: RefObject, {whenHovered = false, bound = false}: UseMouseOptions = {}): State => { if (process.env.NODE_ENV === 'development') { if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) { console.error('useMouse expects a single ref argument.'); @@ -38,19 +43,21 @@ const useMouse = (ref: RefObject, whenHovered: boolean = false): St frame.current = requestAnimationFrame(() => { if (ref && ref.current) { - const {left, top, width, height} = ref.current.getBoundingClientRect(); + const {left, top, width: elW, height: elH} = ref.current.getBoundingClientRect(); const posX = left + window.scrollX; const posY = top + window.scrollY; + const elX = event.pageX - posX; + const elY = event.pageY - posY; setState({ docX: event.pageX, docY: event.pageY, posX, posY, - elX: event.pageX - posX, - elY: event.pageY - posY, - elH: height, - elW: width, + elX: bound ? Math.max(0, Math.min(elX, elW)) : elX, + elY: bound ? Math.max(0, Math.min(elY, elH)) : elY, + elH, + elW, }); } });