use-mouse

1import { useState } from 'react'
2import { useEventListener } from '@/registry/hooks/use-event-listener'
3 
4export type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement'
5export type UseMouseSourceType = 'mouse' | 'touch' | null
6 
7export interface UseMouseInitialValue {
8  x: number
9  y: number
10}
11 
12export interface UseMouseState extends UseMouseInitialValue {
13  sourceType: UseMouseSourceType
14}
15 
16export interface UseMouseOptions {
17  type?: UseMouseCoordType
18  touch?: boolean
19  resetOnTouchEnds?: boolean
20  initialValue?: UseMouseInitialValue
21  window?: Window
22}
23 
24type MouseCoordKey =
25  | 'pageX'
26  | 'pageY'
27  | 'clientX'
28  | 'clientY'
29  | 'screenX'
30  | 'screenY'
31  | 'movementX'
32  | 'movementY'
33type TouchCoordKey =
34  | 'pageX'
35  | 'pageY'
36  | 'clientX'
37  | 'clientY'
38  | 'screenX'
39  | 'screenY'
40type TouchCoordType = Exclude<UseMouseCoordType, 'movement'>
41 
42const DEFAULT_INITIAL_VALUE: UseMouseInitialValue = {
43  x: 0,
44  y: 0,
45}
46 
47const MOUSE_X_COORD_KEY_BY_TYPE: Record<UseMouseCoordType, MouseCoordKey> = {
48  page: 'pageX',
49  client: 'clientX',
50  screen: 'screenX',
51  movement: 'movementX',
52}
53 
54const MOUSE_Y_COORD_KEY_BY_TYPE: Record<UseMouseCoordType, MouseCoordKey> = {
55  page: 'pageY',
56  client: 'clientY',
57  screen: 'screenY',
58  movement: 'movementY',
59}
60 
61const TOUCH_X_COORD_KEY_BY_TYPE: Record<TouchCoordType, TouchCoordKey> = {
62  page: 'pageX',
63  client: 'clientX',
64  screen: 'screenX',
65}
66 
67const TOUCH_Y_COORD_KEY_BY_TYPE: Record<TouchCoordType, TouchCoordKey> = {
68  page: 'pageY',
69  client: 'clientY',
70  screen: 'screenY',
71}
72 
73function readMousePosition(
74  event: MouseEvent,
75  type: UseMouseCoordType,
76): UseMouseInitialValue {
77  const xKey = MOUSE_X_COORD_KEY_BY_TYPE[type]
78  const yKey = MOUSE_Y_COORD_KEY_BY_TYPE[type]
79 
80  return {
81    x: event[xKey],
82    y: event[yKey],
83  }
84}
85 
86function readTouchPosition(
87  touchPoint: Touch,
88  type: UseMouseCoordType,
89): UseMouseInitialValue {
90  if (type === 'movement') {
91    return {
92      x: touchPoint.clientX,
93      y: touchPoint.clientY,
94    }
95  }
96 
97  const xKey = TOUCH_X_COORD_KEY_BY_TYPE[type]
98  const yKey = TOUCH_Y_COORD_KEY_BY_TYPE[type]
99 
100  return {
101    x: touchPoint[xKey],
102    y: touchPoint[yKey],
103  }
104}
105 
106/**
107 * Reactive mouse position with optional touch support.
108 *
109 * @see https://shadcn-hooks.com/docs/hooks/use-mouse
110 */
111export function useMouse(options: UseMouseOptions = {}): UseMouseState {
112  const {
113    type = 'page',
114    touch = true,
115    resetOnTouchEnds = false,
116    initialValue = DEFAULT_INITIAL_VALUE,
117// … truncated