UseMouseDemo

1'use client';
2 
3import { RefObject, useRef, useState } from 'react';
4 
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13import { Checkbox } from '@/components/ui/checkbox';
14 
15import { useMouse } from '@/hooks/guarahooks/use-mouse';
16 
17export default function UseMouseDemo() {
18  const ref = useRef<HTMLDivElement>(null);
19  const [trackOutside, setTrackOutside] = useState(false);
20  const [clampToZero, setClampToZero] = useState(false);
21  const { docX, docY, posX, posY, elX, elY, elW, elH } = useMouse({
22    ref: ref as RefObject<HTMLElement>,
23    trackOutside,
24    clampToZero,
25  });
26 
27  return (
28    <Card className="relative max-w-md w-full" ref={ref}>
29      <CardHeader>
30        <CardTitle>useMouse</CardTitle>
31        <CardDescription>
32          This component uses the <code>useMouse</code> hook to track the mouse
33          position.
34        </CardDescription>
35      </CardHeader>
36      <CardContent className="space-y-2">
37        <div className="flex items-center gap-2">
38          <Checkbox
39            checked={trackOutside}
40            onCheckedChange={() => setTrackOutside((v) => !v)}
41          />
42          <label htmlFor="trackOutside">Track outside</label>
43        </div>
44        <div className="flex items-center gap-2">
45          <Checkbox
46            checked={clampToZero}
47            onCheckedChange={() => setClampToZero((v) => !v)}
48          />
49          <label htmlFor="clampToZero">Clamp to zero</label>
50        </div>
51        <div className="space-y-2">
52          <p className="text-sm">
53            Mouse position in document - x:{docX} y:{docY}
54          </p>
55          <p className="text-sm">
56            Mouse position in element - x:{elX} y:{elY}
57          </p>
58          <p className="text-sm">
59            Element position- x:{posX} y:{posY}
60          </p>
61          <p className="text-sm">
62            Element dimensions - {elW}x{elH}
63          </p>
64        </div>
65      </CardContent>
66      <CardFooter>
67        <p className="text-sm text-muted-foreground">
68          Try moving your mouse around the screen.
69        </p>
70      </CardFooter>
71    </Card>
72  );
73}