jaredLunde / jaredLunde/react-hook

Improvement to return type of `useMouse`

Open
#237 2 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.