Provides real-time screen dimensions like height, width, orientation and more
npm install @avent-ui/use-screen-dimensionsjsx
npm install @avent-ui/useScreenDimensions
`
$3
`jsx
import { useScreenDimensions } from '@avent-ui/useScreenDimensions';
`
$3
`jsx
// Basic usage with default breakpoints
const dimensions = useScreenDimensions();
// With custom options
const dimensions = useScreenDimensions({
debounceMs: 150,
mobileBreakPoint: 640,
tabletBreakPoint: 1280
});
// Access properties
const {
screenWidth,
screenHeight,
isMobile,
isTablet,
isDesktop,
devicePixelRatio,
orientation
} = dimensions;
`
Properties
| Prop | Type | Description |
|---------------------|:----------:|---------------------------------------------------|
| screenWidth | number | Current window width in pixels |
| screenHeight | number | Current window height in pixels |
| devicePixelRatio | number | Device pixel ratio (default: 1) |
| orientation | string \| null | Screen orientation type (e.g., 'portrait-primary') |
| isMobile | boolean | True if screen width is below mobile breakpoint |
| isTablet | boolean | True if screen width is between mobile and tablet breakpoints |
| isDesktop | boolean | True if screen width is above tablet breakpoint |
Options
| Option | Type | Default | Description |
|---------------------|:----------:|:-------:|-------------------------------------------------|
| debounceMs | number | 100 | Milliseconds to debounce resize events |
| mobileBreakPoint | number | 768 | Maximum width (exclusive) for mobile devices |
| tabletBreakPoint | number | 1024 | Minimum width (inclusive) for desktop devices |
Example Usage
`jsx
import React from 'react';
import { useScreenDimensions } from '@avent-ui/useScreenDimensions';
const ResponsiveComponent = () => {
const {
screenWidth,
screenHeight,
isMobile,
isTablet,
isDesktop
} = useScreenDimensions();
return (
Screen: {screenWidth} x {screenHeight}
Device Type: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}
{isMobile && }
{isTablet && }
{isDesktop && }
);
};
`
Features
- Real-time Updates: Automatically updates on window resize and orientation change
- Debounced Events: Prevents excessive re-renders with configurable debounce timing
- SSR Safe: Provides sensible defaults when window` is undefined