+
Current viewport: {currentRange}
+ {currentRange === 'Phone' &&
}
+ {currentRange === 'Desktop' &&
}
+
+ );
+}
+\`\`\`
+
+## Responsive Ranges
+
+- **Phone**: \`(max-width: 599px)\`
+- **Tablet**: \`(min-width: 600px) and (max-width: 1023px)\`
+- **Desktop**: \`(min-width: 1024px) and (max-width: 1439px)\`
+- **LargeDesktop**: \`(min-width: 1440px)\`
+
+## Benefits
+
+- Automatic re-render on range changes
+- Clean React hook API
+- Based on SAP Responsive Breakpoints
+- No manual event listener management needed
+
+## Example: Conditional Rendering
+
+\`\`\`tsx
+function AdaptiveTable() {
+ const range = useViewportRange();
+ const isMobile = range === 'Phone';
+
+ return isMobile ?