useMouse

Track mouse position.

https://www.shaktools.com/shak-hooks

Sensor

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useMouse } from "@shak-hooks/usehooks";

Source: packages/react/src/useMouse.ts

Signature

signature.ts

export function useMouse()

Parameters

No parameters.

Returns

unknown

Exported Types

types.ts

1export interface MouseState {

2 x: number;

3 y: number;

4 elementX: number;

5 elementY: number;

6 elementPositionX: number;

7 elementPositionY: number;

Implementation

use-mouse.ts

1import { useState, useEffect } from "react";

3export function useMouse() {

4 const [state, setState] = useState({ x: 0, y: 0, elementX: 0, elementY: 0 });

6 useEffect(() => {

7 const handler = (event: MouseEvent) => {

8 setState((s) => ({

9 ...s,

10 x: event.clientX,

11 y: event.clientY,

12 }));

13 };

15 document.addEventListener("mousemove", handler);

16 return () => document.removeEventListener("mousemove", handler);

17 }, []);

19 return state;

20}

Google Ads

Usage

example.tsx

1import { useMouse } from "@shak-hooks/usehooks";

3const result = useMouse();

4// result: unknown

5// Use values directly (React state).