alibaba / alibaba/hooks

[RFC] useMouseInElement

Open
#2,615 1 comment 0 reactions 0 assignees View on GitHub
feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.