use-is-touch-device (use-is-touch-device)
Hook to detect if the user's device has touch screen functionality
v0.1.0
Usage
import { use-is-touch-device } from "@/hooks"1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import {
5 Card,
6 CardContent,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10} from "@/components/ui/card";
11
12import { useIsTouchDevice } from "@/components/hooks/use-is-touch-device";
13
14export function UseIsTouchDeviceDemo() {
15 const { isTouchable } = useIsTouchDevice();
16
17 return (
18 <Card className="w-full max-w-md relative">
19 <CardHeader>
20 <CardTitle>useIsTouchDevice</CardTitle>
21 <CardDescription>
22 This hook detects if the user's device has touch screen functionality.
23 </CardDescription>
24 </CardHeader>
25 <CardContent className="space-y-4">
26 <div className="flex flex-col space-y-2">
27 <p className="text-sm font-medium">Touch Support Status:</p>
28 <Badge
29 variant={isTouchable ? "default" : "secondary"}
30 className="w-fit"
31 >
32 {isTouchable ? "Touch Device" : "Non-Touch Device"}
33 </Badge>
34 </div>
35 <div className="text-sm text-muted-foreground">
36 {isTouchable
37 ? "Your device supports touch input"
38 : "Your device does not support touch input"}
39 </div>
40 </CardContent>
41 </Card>
42 );
43}
44Install
npx wkkkis-hooks add use-is-touch-deviceOptions
| Name | Type | Default | Description |
|---|---|---|---|
| This | — | — | hook takes no parameters. |
Returns — Properties
| Name | Type | Default | Description |
|---|---|---|---|
| isTouchable | boolean | — | Whether the device supports touch input |
Features
- ✅ SSR Support
- ✅ TypeScript
- ✅ Performance optimized
- ✅ React 18+ compatible
- ✅ Cross-browser compatibility
Files in this hook
| Source | Destination |
|---|---|
| files/use-is-touch-device.ts | src/hooks/use-is-touch-device.ts |