[RFC] useMouseInElement
- Dominant language
- TypeScript
- Stars
- 15k
- Forks
- 2.8k
- Avg merge
- 15h 7m
- Merged PRs (30d)
- 2
Description
### 用于对一个元素进行监听:鼠标是否在停留在该元素上,并提供回调函数,可以在鼠标放到元素上触发动作,比如触发动画回调,还有更复杂一些的场景弹出一个浮框内容,浮框跟着鼠标在该元素运动
### API
```typescript
function useMouseInElement(target?: BasicTarget, inCallback?: (result: Result) => void, outCallback?: (result: Result) => void)
```
### Demo
```typescript
import { useMouseInElement } from 'ahooks';
import React, { useRef } from 'react';
const App: React.FC = () => {
const ref = useRef(null);
const { isInside } = useMouseInElement(
ref.current,
() => {
console.log('inside');
},
() => {
console.log('outside');
},
);
return (
isInside:{String(isInside)}
);
};
export default App;
```
Contributor guide
Research direction
Use the proposed TypeScript API and React demo as the starting point, then review the repository's existing hook entry points and related tests for local conventions. Done means the hook reports whether the pointer is inside the target element and invokes the supplied inside and outside callbacks with the stated result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100