{"_id":"@avent-ui/use-screen-dimensions","_rev":"2-cc617fd7ff8ebe89e42d5e3df17c6443","name":"@avent-ui/use-screen-dimensions","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@avent-ui/use-screen-dimensions","version":"0.0.1","keywords":["avent-ui","avent","hook","ssr","responsive","orientation","screen","dimensions"],"author":{"name":"Aathi Eswar S"},"license":"MIT","_id":"@avent-ui/use-screen-dimensions@0.0.1","maintainers":[{"name":"aathieswar","email":"aathi28082003@gmail.com"}],"homepage":"https://github.com/AathiEswar/avent-ui/blob/main/src/hooks/useScreenDimensions/README.md","bugs":{"url":"https://github.com/AathiEswar/avent-ui/issues"},"dist":{"shasum":"105a747af03e6e6fe8874bf77efa00ad0bdf5d8f","tarball":"https://registry.npmjs.org/@avent-ui/use-screen-dimensions/-/use-screen-dimensions-0.0.1.tgz","fileCount":10,"integrity":"sha512-lMg4g7rmUH/zeK/bxEJsDxZjvFFPMvKZdZ/jiA6ST6Ntm6L6TOFLH8d87pfYhuif9clOnX+Ff36tUMa4bDGsNA==","signatures":[{"sig":"MEYCIQCqMauzdJEEI3J0jhExObJ/K3wDlKCEEQMBFoyhVpSpaAIhAKwWUSrUAQadWMW9H6bbrv5V0GLnQUwfiF2Zen19FsiS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16888},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"60e6488ed62bf84b45a33a1141a63274a1318499","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepare":"npm run build"},"_npmUser":{"name":"aathieswar","actor":{"name":"aathieswar","type":"user","email":"aathi28082003@gmail.com"},"email":"aathi28082003@gmail.com"},"repository":{"url":"git+https://github.com/AathiEswar/avent-ui.git#main","type":"git"},"_npmVersion":"9.8.1","description":"Provides real-time screen dimensions like height, width, orientation and more","directories":{},"_nodeVersion":"21.7.1","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.27.2","typescript":"^5.6.3","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@rollup/plugin-babel":"^6.0.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.1","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-node-resolve":"^5.2.0","@rollup/plugin-node-resolve":"^15.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/use-screen-dimensions_0.0.1_1750919906456_0.04978233643499497","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@avent-ui/use-screen-dimensions","version":"0.0.2","description":"Provides real-time screen dimensions like height, width, orientation and more","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"}},"type":"module","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/AathiEswar/avent-ui.git#main"},"keywords":["avent-ui","avent","hook","ssr","responsive","orientation","screen","dimensions"],"author":{"name":"Aathi Eswar S"},"license":"MIT","bugs":{"url":"https://github.com/AathiEswar/avent-ui/issues"},"homepage":"https://github.com/AathiEswar/avent-ui/blob/main/src/hooks/useScreenDimensions/README.md","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-node-resolve":"^15.3.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","rollup":"^4.27.2","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-typescript2":"^0.36.0","typescript":"^5.6.3"},"_id":"@avent-ui/use-screen-dimensions@0.0.2","gitHead":"35f2a1f3394bf29f021de620fcfd68d7a69287cc","_nodeVersion":"21.7.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-63jYE8XzfCTjPcEoO7+gntwYPP733MuRKZ98z/2vQVs8vLPkrV+xyzRAo8jxKEr+1sUFg01XGBwx/VwBYappPw==","shasum":"56eeb55507465bd162c3f7d9c38bde5fcc3e53af","tarball":"https://registry.npmjs.org/@avent-ui/use-screen-dimensions/-/use-screen-dimensions-0.0.2.tgz","fileCount":16,"unpackedSize":22027,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDWduO4DmxO4Y6qYqtC86YxJX3ANU5AvptQyHnG3aEHWAiB1liTOdPeXvQriaVTlrlHX4bYGSAW4gcB4AxmudzW2aQ=="}]},"_npmUser":{"name":"aathieswar","email":"aathi28082003@gmail.com","actor":{"name":"aathieswar","email":"aathi28082003@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"aathieswar","email":"aathi28082003@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-screen-dimensions_0.0.2_1751094841294_0.4846002027729297"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-26T06:38:26.398Z","modified":"2025-06-28T07:14:01.688Z","0.0.1":"2025-06-26T06:38:26.652Z","0.0.2":"2025-06-28T07:14:01.481Z"},"bugs":{"url":"https://github.com/AathiEswar/avent-ui/issues"},"author":{"name":"Aathi Eswar S"},"license":"MIT","homepage":"https://github.com/AathiEswar/avent-ui/blob/main/src/hooks/useScreenDimensions/README.md","keywords":["avent-ui","avent","hook","ssr","responsive","orientation","screen","dimensions"],"repository":{"type":"git","url":"git+https://github.com/AathiEswar/avent-ui.git#main"},"description":"Provides real-time screen dimensions like height, width, orientation and more","maintainers":[{"name":"aathieswar","email":"aathi28082003@gmail.com"}],"readme":"# AventUI - useScreenDimensions \r\n\r\nThe **useScreenDimensions** hook provides real-time screen dimensions, device pixel ratio, orientation, and responsive breakpoint information. It includes debounced resize handling and automatically detects mobile, tablet, and desktop viewports based on configurable breakpoints.\r\n\r\n## Installation\r\n\r\n### 1. Install the Component via npm:\r\n\r\n```jsx\r\nnpm install @avent-ui/useScreenDimensions\r\n```\r\n\r\n### 2. Import the hook\r\n\r\n```jsx\r\nimport { useScreenDimensions } from '@avent-ui/useScreenDimensions';\r\n```\r\n\r\n### 3. Use it to get Screen Dimensions and Breakpoint Information\r\n\r\n```jsx\r\n// Basic usage with default breakpoints\r\nconst dimensions = useScreenDimensions();\r\n\r\n// With custom options\r\nconst dimensions = useScreenDimensions({\r\n  debounceMs: 150,\r\n  mobileBreakPoint: 640,\r\n  tabletBreakPoint: 1280\r\n});\r\n\r\n// Access properties\r\nconst { \r\n  screenWidth, \r\n  screenHeight, \r\n  isMobile, \r\n  isTablet, \r\n  isDesktop,\r\n  devicePixelRatio,\r\n  orientation \r\n} = dimensions;\r\n```\r\n\r\n## Properties\r\n\r\n| Prop                | Type       | Description                                       |\r\n|---------------------|:----------:|---------------------------------------------------|\r\n| `screenWidth`       | `number`   | Current window width in pixels                    |\r\n| `screenHeight`      | `number`   | Current window height in pixels                   |\r\n| `devicePixelRatio`  | `number`   | Device pixel ratio (default: 1)                  |\r\n| `orientation`       | `string \\| null` | Screen orientation type (e.g., 'portrait-primary') |\r\n| `isMobile`          | `boolean`  | True if screen width is below mobile breakpoint  |\r\n| `isTablet`          | `boolean`  | True if screen width is between mobile and tablet breakpoints |\r\n| `isDesktop`         | `boolean`  | True if screen width is above tablet breakpoint  |\r\n\r\n## Options\r\n\r\n| Option              | Type       | Default | Description                                     |\r\n|---------------------|:----------:|:-------:|-------------------------------------------------|\r\n| `debounceMs`        | `number`   | `100`   | Milliseconds to debounce resize events          |\r\n| `mobileBreakPoint`  | `number`   | `768`   | Maximum width (exclusive) for mobile devices    |\r\n| `tabletBreakPoint`  | `number`   | `1024`  | Minimum width (inclusive) for desktop devices   |\r\n\r\n## Example Usage\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { useScreenDimensions } from '@avent-ui/useScreenDimensions';\r\n\r\nconst ResponsiveComponent = () => {\r\n  const { \r\n    screenWidth, \r\n    screenHeight, \r\n    isMobile, \r\n    isTablet, \r\n    isDesktop \r\n  } = useScreenDimensions();\r\n\r\n  return (\r\n    <div>\r\n      <p>Screen: {screenWidth} x {screenHeight}</p>\r\n      <p>Device Type: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}</p>\r\n      \r\n      {isMobile && <MobileComponent />}\r\n      {isTablet && <TabletComponent />}\r\n      {isDesktop && <DesktopComponent />}\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Features\r\n\r\n- **Real-time Updates**: Automatically updates on window resize and orientation change\r\n- **Debounced Events**: Prevents excessive re-renders with configurable debounce timing\r\n- **SSR Safe**: Provides sensible defaults when `window` is undefined\r\n- **Responsive Breakpoints**: Built-in mobile, tablet, and desktop detection\r\n- **Orientation Support**: Tracks device orientation changes\r\n- **Device Pixel Ratio**: Access to high-DPI display information","readmeFilename":"README.md"}