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;
8}

Implementation

use-mouse.ts
1import { useState, useEffect } from "react";
2
3export function useMouse() {
4 const [state, setState] = useState({ x: 0, y: 0, elementX: 0, elementY: 0 });
5
6 useEffect(() => {
7 const handler = (event: MouseEvent) => {
8 setState((s) => ({
9 ...s,
10 x: event.clientX,
11 y: event.clientY,
12 }));
13 };
14
15 document.addEventListener("mousemove", handler);
16 return () => document.removeEventListener("mousemove", handler);
17 }, []);
18
19 return state;
20}

Advertisement

Google Ads

Usage

example.tsx
1import { useMouse } from "@shak-hooks/usehooks";
2
3const result = useMouse();
4// result: unknown
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy