0
# Device & Environment
1

2
Device and environment detection including operating system, orientation, motion preferences, and user activity monitoring.
3

4
## Capabilities
5

6
### useOs
7

8
Detect operating system for platform-specific functionality.
9

10
```typescript { .api }
11
/**
12
 * Detect operating system
13
 * @param options - Configuration for detection timing
14
 * @returns Operating system identifier
15
 */
16
function useOs(options?: UseOsOptions): UseOSReturnValue;
17

18
interface UseOsOptions {
19
  getValueInEffect?: boolean;
20
}
21

22
type UseOSReturnValue = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
import { useOs } from "@mantine/hooks";
29

30
function PlatformSpecificComponent() {
31
  const os = useOs();
32
  
33
  const getShortcut = () => {
34
    switch (os) {
35
      case 'macos':
36
      case 'ios':
37
        return 'Cmd+S';
38
      case 'windows':
39
      case 'linux':
40
      case 'android':
41
        return 'Ctrl+S';
42
      default:
43
        return 'Ctrl+S or Cmd+S';
44
    }
45
  };
46
  
47
  return (
48
    <div>
49
      <p>Your OS: {os}</p>
50
      <p>Save shortcut: {getShortcut()}</p>
51
      {(os === 'ios' || os === 'android') && (
52
        <MobileSpecificComponent />
53
      )}
54
    </div>
55
  );
56
}
57
```
58

59
### useOrientation
60

61
Device orientation detection for responsive layouts.
62

63
```typescript { .api }
64
/**
65
 * Device orientation detection
66
 * @param options - Configuration for orientation tracking
67
 * @returns Object with angle and orientation type
68
 */
69
function useOrientation(options?: UseOrientationOptions): UseOrientationReturnType;
70

71
interface UseOrientationOptions {
72
  angle?: number;
73
  type?: OrientationType;
74
}
75

76
interface UseOrientationReturnType {
77
  angle: number;
78
  type: OrientationType;
79
}
80
```
81

82
### useReducedMotion
83

84
Detect user's reduced motion preference for accessibility.
85

86
```typescript { .api }
87
/**
88
 * Detect reduced motion preference
89
 * @param initialValue - Initial value for SSR
90
 * @param options - Configuration for effect timing
91
 * @returns Boolean indicating if user prefers reduced motion
92
 */
93
function useReducedMotion(
94
  initialValue?: boolean, 
95
  options?: { getInitialValueInEffect?: boolean }
96
): boolean;
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
import { useReducedMotion } from "@mantine/hooks";
103

104
function AnimatedComponent() {
105
  const shouldReduceMotion = useReducedMotion();
106
  
107
  return (
108
    <div
109
      style={{
110
        transform: 'translateX(0)',
111
        transition: shouldReduceMotion ? 'none' : 'transform 0.3s ease',
112
      }}
113
      className={shouldReduceMotion ? 'no-animation' : 'with-animation'}
114
    >
115
      Content with respect for motion preferences
116
    </div>
117
  );
118
}
119
```
120

121
### useIdle
122

123
Detect user idle state based on activity timeout.
124

125
```typescript { .api }
126
/**
127
 * Detect user idle state
128
 * @param timeout - Idle timeout in milliseconds
129
 * @param options - Configuration for idle detection
130
 * @returns Boolean indicating if user is idle
131
 */
132
function useIdle(timeout: number, options?: UseIdleOptions): boolean;
133

134
interface UseIdleOptions {
135
  events?: string[];
136
  initialState?: boolean;
137
}
138
```
139

140
**Usage Examples:**
141

142
```typescript
143
import { useIdle } from "@mantine/hooks";
144

145
function IdleDetector() {
146
  const idle = useIdle(5000, {
147
    events: ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'],
148
    initialState: false,
149
  });
150
  
151
  return (
152
    <div>
153
      <p>User is: {idle ? 'Idle' : 'Active'}</p>
154
      {idle && <div>You've been idle for 5 seconds</div>}
155
    </div>
156
  );
157
}
158

159
// Auto-save when user goes idle
160
function AutoSaveEditor() {
161
  const [content, setContent] = useState('');
162
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
163
  const idle = useIdle(3000);
164
  
165
  useEffect(() => {
166
    if (idle && content !== lastSavedContent) {
167
      autoSave(content);
168
      setLastSaved(new Date());
169
    }
170
  }, [idle, content]);
171
  
172
  return (
173
    <div>
174
      <textarea
175
        value={content}
176
        onChange={(e) => setContent(e.target.value)}
177
      />
178
      {lastSaved && (
179
        <p>Last saved: {lastSaved.toLocaleTimeString()}</p>
180
      )}
181
    </div>
182
  );
183
}
184
```