use-orientation (use-orientation)
Tracks the window's current media query.
v0.1.0
Usage
import { use-orientation } from "@/hooks"1"use client";
2
3import {
4 Card,
5 CardContent,
6 CardDescription,
7 CardFooter,
8 CardHeader,
9 CardTitle,
10} from "@/components/ui/card";
11
12import { useOrientation } from "@/components/hooks/use-orientation";
13
14export function UseOrientationDemo() {
15 const orientation = useOrientation();
16
17 return (
18 <Card className="relative max-w-sm w-full">
19 <CardHeader>
20 <CardTitle>useOrientation</CardTitle>
21 <CardDescription>
22 This component uses the <code>useOrientation</code> hook to get the
23 current orientation of the device.
24 </CardDescription>
25 </CardHeader>
26 <CardContent>
27 <p>Current orientation: {orientation}</p>
28 {orientation === "portrait" ? (
29 <p className="text-green-600">You are in portrait mode š±</p>
30 ) : (
31 <p className="text-purple-600">You are in landscape mode š„ļø</p>
32 )}
33 </CardContent>
34 <CardFooter>
35 <p className="text-sm text-muted-foreground">
36 Try rotating your device or resizing the window.
37 </p>
38 </CardFooter>
39 </Card>
40 );
41}
42Install
npx wkkkis-hooks add use-orientationOptions
| Name | Type | Default | Description |
|---|---|---|---|
| There | ā | ā | is no props for this hook. |
Returns ā Properties
| Name | Type | Default | Description |
|---|---|---|---|
| The hook returns a string | ā | ā | either 'portrait' or 'landscape' . |
SSR & Initial Value
- The hook defaults to 'portrait' if window is not available (e.g., during SSR).
- On the client, the initial value reflects the current orientation.
State Updates
- The hook updates its state immediately on mount and whenever the device orientation changes.
- Uses the change event on window.matchMedia('(orientation: portrait)') for real-time updates.
Browser Compatibility
- Uses addEventListener / removeEventListener if available, otherwise falls back to addListener / removeListener for older browsers.
Cleanup
- The event listener is removed automatically when the component unmounts.
Return Value
- The hook returns a string: either 'portrait' or 'landscape' .
Caveats & Best Practices
- The hook is intended for use in the browser; on the server, it will always return 'portrait' .
- Works for both mobile and desktop browsers that support the orientation media query.
- If you need to support environments without window.matchMedia , consider a fallback.
Files in this hook
| Source | Destination |
|---|---|
| files/use-orientation.ts | src/hooks/use-orientation.ts |