jaredLunde / jaredLunde/react-hook
Improvement to return type of `useMouse`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 96
- PR merge metrics
- No merged PRs in 30d
Description
I noticed that the return type of `useMouse` isn't exactly reflective of the data returned.
If we made it shaped more like this:
```ts
export type MousePosition = MousePositionOver | MousePositionOut
type MousePositionOver = {
x: number
y: number
pageX: number
pageY: number
clientX: number
clientY: number
screenX: number
screenY: number
elementWidth: number
elementHeight: number
isOver: true
isDown: boolean
isTouch: boolean
}
type MousePositionOut = {
x: undefined
y: undefined
pageX: undefined
pageY: undefined
clientX: undefined
clientY: undefined
screenX: undefined
screenY: undefined
elementWidth: undefined
elementHeight: undefined
isOver: false
isDown: false
isTouch: boolean
}
```
This preserve additional type information since, if you check that `mouseData.isOver` is `true`, the inside of that conditional will see all the values as numbers and not have to check each property individually.
Also, if we switch from null to undefined for the missing values, you can use default values during destructuring:
```ts
const { x = 0, y = 0, isOver } = useMouse(ref)
```
The change from null to undefined would be breaking, so if you prefer we could put off merging that until a planned major version bump, but the rest should be safe.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the TypeScript definition and implementation of useMouse, then inspect its current return type and missing-value behavior. Done means the return type reflects the over/out distinction and the null-to-undefined change is handled according to the issue's compatibility concern.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100