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

feat: 🎸 add {bound} option to useMouse

Browse Source
This commit is contained in:
streamich 2019-03-26 10:41:23 +01:00 committed by Va Da
parent f5faba515d
commit 9bb02a1b93
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/__stories__/useMouse.story.tsx
View File

@ -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 (
<>

19
src/useMouse.ts
View File

@ -12,7 +12,12 @@ export interface State {
elW: number;
}
const useMouse = (ref: RefObject<HTMLElement>, whenHovered: boolean = false): State => {
export interface UseMouseOptions {
whenHovered?: boolean;
bound?: boolean;
}
const useMouse = (ref: RefObject<HTMLElement>, {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<HTMLElement>, 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,
});
}
});