{"id":12364,"library":"viewport-dimensions","title":"Viewport Dimensions Utility","description":"This `viewport-dimensions` utility provides a simple API for retrieving and watching browser viewport dimensions (width, height, vmin, vmax). Unlike `window.innerWidth`, it specifically uses `documentElement.clientWidth` and `documentElement.clientHeight` to report dimensions *excluding* scrollbars, which is a key differentiator. This package is currently at version `0.2.0` and appears to be unmaintained, with its last known activity dating back several years. It primarily targets CommonJS environments and does not natively support modern ES module imports. It offers basic functions like `width()`, `height()`, `min()`, `max()`, and `setDimensions()` to update internal references, making it suitable for simple, browser-based dimension tracking without external dependencies. The low version number and lack of recent updates suggest it is no longer actively developed or maintained.","status":"abandoned","version":"0.2.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/alexdunphy/viewport","tags":["javascript","viewport","browser","window","document","width","height","innerWidth","innerHeight"],"install":[{"cmd":"npm install viewport-dimensions","lang":"bash","label":"npm"},{"cmd":"yarn add viewport-dimensions","lang":"bash","label":"yarn"},{"cmd":"pnpm add viewport-dimensions","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is a CommonJS module and is imported as 'viewport', not 'viewport-dimensions'. It does not support native ES module syntax without a bundler or specific Node.js interop.","wrong":"import viewport from 'viewport-dimensions'; // Incorrect package name and ESM syntax\nimport { viewport } from 'viewport'; // Not a named export, common mistake","symbol":"viewport","correct":"const viewport = require('viewport');"},{"note":"Access methods like `width()` and `height()` via the `viewport` object returned by `require()`.","wrong":"import { width } from 'viewport'; // 'width' is a method on the default export, not a direct named export","symbol":"width","correct":"const viewport = require('viewport');\nconst currentWidth = viewport.width();"},{"note":"Access methods like `height()` and `min()` via the `viewport` object returned by `require()`.","wrong":"import { height } from 'viewport'; // 'height' is a method on the default export, not a direct named export","symbol":"height","correct":"const viewport = require('viewport');\nconst currentHeight = viewport.height();"}],"quickstart":{"code":"// This code should be run in a browser environment or with a CommonJS-compatible runtime.\n\n// 1. Install the package: npm install viewport-dimensions\n// 2. Use require() to import it.\nconst viewport = require('viewport');\n\nconsole.log('Initial Viewport State:');\nconsole.log('Width:', viewport.width());\nconsole.log('Height:', viewport.height());\nconsole.log('Max Dimension (vmin):', viewport.max());\nconsole.log('Min Dimension (vmax):', viewport.min());\n\n// To simulate a resize event and update dimensions\n// In a real browser, you would attach this to window.onresize\nfunction updateAndLogDimensions() {\n  viewport.setDimensions(); // Manually update internal dimension references\n  console.log('\\nViewport dimensions updated:');\n  console.log('New Width:', viewport.width());\n  console.log('New Height:', viewport.height());\n}\n\n// Call it once for demonstration, or attach to window.resize in a browser\n// window.addEventListener('resize', updateAndLogDimensions);\nupdateAndLogDimensions();\n\n// Example of retrieving a dimension again after potential changes\nconsole.log('\\nFinal Width (example):', viewport.width());","lang":"javascript","description":"Demonstrates how to import the `viewport-dimensions` module using CommonJS and retrieve the current width, height, maximum, and minimum viewport dimensions. It also shows how to manually update the dimensions using `setDimensions()`."},"warnings":[{"fix":"Consider using a more modern, actively maintained library for viewport dimension tracking or implementing a custom solution using modern browser APIs (e.g., Resize Observer for element dimensions, `window.innerWidth`/`innerHeight` for viewport).","message":"This package is unmaintained and considered abandoned. It has not received updates for several years, which may lead to compatibility issues with modern browsers or Node.js versions, and potential unpatched vulnerabilities.","severity":"breaking","affected_versions":"all"},{"fix":"Understand the distinction: `documentElement.clientWidth` provides content area dimensions. If scrollbars are needed in your calculation, directly use `window.innerWidth` and `window.innerHeight`.","message":"The package uses `documentElement.clientWidth` and `clientHeight` to determine dimensions, which specifically excludes scrollbar width/height. If you expect `window.innerWidth` or `window.innerHeight` behavior (which includes scrollbars), this will report different values.","severity":"gotcha","affected_versions":"all"},{"fix":"In an ESM project, if you must use this library, import CommonJS modules using `import viewport from 'viewport';` (if your build tool supports CJS interop) or `const viewport = require('viewport');` if running directly in Node.js with a CommonJS context or using dynamic `import()`.","message":"This package is a CommonJS module and does not natively support ES module (`import`/`export`) syntax. Attempting to `import` it directly in an ESM context will result in syntax errors or require specific build tool configurations.","severity":"breaking","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your environment supports CommonJS or use a bundler (like Webpack/Rollup) that handles CommonJS modules. If in an ESM project, you might need to configure your bundler for CommonJS interop or use `import()` for dynamic loading.","cause":"Attempting to use `require()` in an ES module context in Node.js or in a browser environment without a CommonJS loader/bundler.","error":"ReferenceError: require is not defined"},{"fix":"Verify the package is installed (`npm i -S viewport-dimensions`), the import path is `require('viewport')` (not `viewport-dimensions`), and that the code is executing in a browser-like environment.","cause":"The 'viewport' object was not successfully loaded or initialized, often due to an incorrect import path, the package not being installed, or attempting to run in a non-browser environment where `document` or `window` are undefined.","error":"Cannot read properties of undefined (reading 'width')"},{"fix":"Ensure the package is installed via `npm i -S viewport-dimensions` and imported specifically as `require('viewport')`, as the internal module name differs from the npm package name.","cause":"Incorrect package name in the `require()` statement or the package was not properly installed.","error":"Module not found: Error: Can't resolve 'viewport'"}],"ecosystem":"npm"}