{"_id":"@ananay-nag/web-device-info","name":"@ananay-nag/web-device-info","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ananay-nag/web-device-info","version":"1.0.0","description":"Universal web screen/device info (JS, React, Vue3, Angular, Svelte) with real-time updates","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"scripts":{"build:lib":"tsup src/index.ts  --dts --minify --format esm,cjs --out-dir dist --tsconfig tsconfig.build.json","clean":"rm -rf dist","build":"npm run clean && npm run build:lib","prepublishOnly":"npm run build"},"keywords":["device","screen","responsive","mobile","tablet","desktop","browser","screen-size","device-size","angular-screen-size","react-screen-size","vue-screen-size","javascript-screen-size","Svelte-screen-size","vanilla-screen-size","mobile-size","mobile-screen-size","web-screen-size","tab-screen-size","desktop-screen-size","window-size","window screen width","window screen height","angular, react, vue, vue3, javascript, Svelte, vanilla screen size"],"license":"MIT","peerDependencies":{"react":">=17 || ^18 || ^19","react-dom":">=17 || ^18 || ^19","vue":"^3.2.0","@angular/core":">=14","rxjs":">=7","svelte":"^4 || ^5"},"devDependencies":{"tsup":"^8.5.0","typescript":"^5.9.2"},"engines":{"node":">=14.0.0"},"repository":{"type":"git","url":"git+https://github.com/ananay-nag/web-device-info.git"},"author":{"name":"Ananay Nag"},"contributors":[{"name":"Ananay Nag","email":"ananaynag1994s@gmail.com","url":"https://avatars.githubusercontent.com/u/36204888?s=48&v=4"}],"publishConfig":{"access":"public"},"_id":"@ananay-nag/web-device-info@1.0.0","gitHead":"1835ae6ce5735bb8f7b05fe6b5ad619d3281fa95","bugs":{"url":"https://github.com/ananay-nag/web-device-info/issues"},"homepage":"https://github.com/ananay-nag/web-device-info#readme","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-TY5gY7SqN2h7Xaw9KC3CK0vbY4gfYT/Z6YpjX9O+m6K5aBAkZPs0Uvbi+cBg9B6qrQpvoiQ4Al2mDVZyXEfwlA==","shasum":"7c58f9da4bf1e37e81c6c6c68cc19e9e3f9546b2","tarball":"https://registry.npmjs.org/@ananay-nag/web-device-info/-/web-device-info-1.0.0.tgz","fileCount":7,"unpackedSize":35159,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD9KMkFbFiwLOL8TgLWGw0dVFu66HJ5q4mPcFn3yVmq7QIhAOW00K+oHE/7anLrW1ihlDVxyl9tSXXe3vsQC2XcBsmY"}]},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"directories":{},"maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-device-info_1.0.0_1755597663490_0.7505199803214033"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-19T10:01:03.377Z","1.0.0":"2025-08-19T10:01:03.691Z","modified":"2025-08-19T10:01:03.980Z"},"maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"description":"Universal web screen/device info (JS, React, Vue3, Angular, Svelte) with real-time updates","homepage":"https://github.com/ananay-nag/web-device-info#readme","keywords":["device","screen","responsive","mobile","tablet","desktop","browser","screen-size","device-size","angular-screen-size","react-screen-size","vue-screen-size","javascript-screen-size","Svelte-screen-size","vanilla-screen-size","mobile-size","mobile-screen-size","web-screen-size","tab-screen-size","desktop-screen-size","window-size","window screen width","window screen height","angular, react, vue, vue3, javascript, Svelte, vanilla screen size"],"repository":{"type":"git","url":"git+https://github.com/ananay-nag/web-device-info.git"},"contributors":[{"name":"Ananay Nag","email":"ananaynag1994s@gmail.com","url":"https://avatars.githubusercontent.com/u/36204888?s=48&v=4"}],"author":{"name":"Ananay Nag"},"bugs":{"url":"https://github.com/ananay-nag/web-device-info/issues"},"license":"MIT","readme":"\n# 🌐 web-device-info ![Version](https://img.shields.io/badge/version-1.0.0-green)\n\n\n**Universal Web Device Information Library** – works for **JS, React, Angular, Vue3, Svelte**.  \nDetect **screen size, orientation, diagonal, platform, language, online status** in real-time across all major frameworks.\n\n---\n\n## 🚀 Features\n\n- ✅ Multi-framework support: React, Angular, Vue3, Svelte, Vanilla JS, Common JS \n- ✅ Real-time updates on resize, orientation, and online/offline changes  \n- ✅ Screen width, height, and approximate diagonal size (inches)  \n- ✅ Orientation detection: portrait / landscape  \n- ✅ User agent, platform, language detection  \n- ✅ TypeScript ready, fully typed  \n- ✅ Tiny & dependency-free (~10 KB)  \n- ✅ Hooks / composables for modern frameworks  \n\n---\n\n## Version \n### **Version:** \n- latest : [ ![Version](https://img.shields.io/badge/version-1.0.0-green)](./version-1-0-0.md) \n- v1.0.0 : [ ![Version](https://img.shields.io/badge/version-1.0.0-blue)](./version-1-0-0.md)\n\n## 📦 Installation\n\n```bash\n# npm\nnpm install @ananay-nag/web-device-info\n\n# yarn\nyarn add @ananay-nag/web-device-info\n\n# pnpm\npnpm add @ananay-nag/web-device-info\n\n```\n\n## 🛠 Usage Examples\n\n### 1️⃣ React\n\n``` typescript\nimport React from \"react\";\nimport { ReactDeviceInfo } from \"@ananay-nag/web-device-info\";\n\nconst { useDeviceInfo } = ReactDeviceInfo;\n\nexport default function App() {\n  const deviceInfo = useDeviceInfo({ useViewport: true });\n\n  return (\n    <div>\n      <h1>React Device Info</h1>\n      <pre>{JSON.stringify(deviceInfo, null, 2)}</pre>\n    </div>\n  );\n}\n\n```\n\n### 2️⃣ Angular\n\n``` typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport { AngularDeviceInfo } from \"@ananay-nag/web-device-info\";\n\n@Component({\n  selector: \"app-root\",\n  template: `\n    <h1>Angular Device Info</h1>\n    <pre>{{ deviceInfo | json }}</pre>\n  `\n})\nexport class AppComponent implements OnInit {\n  deviceInfo: any;\n\n  ngOnInit() {\n    this.deviceInfo = AngularDeviceInfo.getDeviceInfo({ useViewport: true });\n  }\n}\n\n```\n\n### 3️⃣ Vue 3\n\n``` javascript\n<script setup lang=\"ts\">\nimport { VueDeviceInfo } from \"@ananay-nag/web-device-info\";\n\nconst { useDeviceInfo } = VueDeviceInfo;\nconst deviceInfo = useDeviceInfo({ useViewport: true });\n</script>\n\n<template>\n  <h1>Vue 3 Device Info</h1>\n  <pre>{{ deviceInfo }}</pre>\n</template>\n```\n\n### 4️⃣ Svelte\n\n``` javascript\n<script lang=\"ts\">\n  import { SvelteDeviceInfo } from \"@ananay-nag/web-device-info\";\n  const { deviceInfo } = SvelteDeviceInfo.useDeviceInfo({ useViewport: true });\n</script>\n\n<h1>Svelte Device Info</h1>\n<pre>{JSON.stringify($deviceInfo, null, 2)}</pre>\n```\n\n### 5️⃣ Vanilla JS\n``` javascript\nimport { JSDeviceInfo } from \"@ananay-nag/web-device-info\";\n\nconst { getDeviceInfo } = JSDeviceInfo;\nconsole.log(\"Device Info:\", getDeviceInfo({ useViewport: true }));\n\n```\n\n## 📋 API Reference\n\n### DeviceOptions\n\n| Option        | Type    | Default | Description                                                                  |\n| ------------- | ------- | ------- | ---------------------------------------------------------------------------- |\n| `useViewport` | boolean | false   | Use `window.innerWidth/innerHeight` instead of `screen.width/screen.height`. |\n\n### DeviceInfo\n| Field         | Type                      | Description                      |\n| ------------- | ------------------------- | -------------------------------- |\n| `width`       | number                    | Screen width in pixels           |\n| `height`      | number                    | Screen height in pixels          |\n| `diagonal`    | number                    | Approximate diagonal in inches   |\n| `orientation` | \"portrait\" \\| \"landscape\" | Screen orientation               |\n| `userAgent`   | string                    | Browser user agent               |\n| `platform`    | string                    | Platform (e.g., Win32, MacIntel) |\n| `language`    | string                    | Browser language                 |\n| `online`      | boolean                   | Online/offline status            |\n\n\n### Exports\n``` Typescript\nimport {\n  IDeviceInfo,\n  IDeviceOptions,\n  getDeviceInfo,   // Core JS API\n  onDeviceChange,  // Listen to resize/orientation changes\n  ReactDeviceInfo, // React hook\n  AngularDeviceInfo,\n  VueDeviceInfo,\n  SvelteDeviceInfo,\n  JSDeviceInfo\n} from \"@ananay-nag/web-device-info\";\n\n```\n\n### 🔄 Orientation Change Example\n``` typescript\nimport { onDeviceChange } from \"@ananay-nag/web-device-info\";\n\nonDeviceChange((info) => {\n  console.log(\"Device changed:\", info.orientation, info.width, info.height);\n});\n\n```\n\n## 💡 Advantages Compared to Other Packages\n| Feature / Package                  | web-device-info | react-device-detect | ua-parser-js | detect.js |\n| ---------------------------------- | --------------- | ------------------- | ------------ | --------- |\n| Multi-framework support            | ✅               | ❌                   | ❌            | ❌         |\n| Real-time updates                  | ✅               | ❌                   | ❌            | ❌         |\n| Screen dimensions (width & height) | ✅               | ✅                   | ✅            | ✅         |\n| Screen diagonal size               | ✅               | ❌                   | ❌            | ❌         |\n| Orientation detection              | ✅               | ❌                   | ❌            | ❌         |\n| Online/offline status              | ✅               | ❌                   | ❌            | ❌         |\n| TypeScript ready                   | ✅               | ✅                   | ✅            | ❌         |\n| Tiny & dependency-free             | ✅               | ❌                   | ❌            | ❌         |\n| Hooks / composables                | ✅               | ✅                   | ❌            | ❌         |\n| Vanilla JS support                 | ✅               | ❌                   | ✅            | ✅         |\n\n### Key Advantages:\n\n- One library for all major frameworks\n\n- Automatically updates on screen, orientation, and online status changes\n\n- sreen diagonal calculation — unique among similar libraries\n\n- Minimal bundle size for production apps\n\n- Fully TypeScript ready\n\n- Unified API across frameworks\n\n## 📜 License\n\nMIT © 2025 – Open Source ❤️","readmeFilename":"README.md","_rev":"1-7097d530db4a22327dd58ed4792f8391"}