Viewport Dimensions Utility

Common errors

• ReferenceError: require is not defined

  cause Attempting to use `require()` in an ES module context in Node.js or in a browser environment without a CommonJS loader/bundler.
  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.

• Cannot read properties of undefined (reading 'width')

  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.
  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.

• Module not found: Error: Can't resolve 'viewport'

  cause Incorrect package name in the `require()` statement or the package was not properly installed.
  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.

Warnings

• breaking 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.
  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).
• gotcha 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.
  Fix: Understand the distinction: `documentElement.clientWidth` provides content area dimensions. If scrollbars are needed in your calculation, directly use `window.innerWidth` and `window.innerHeight`.
• breaking 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.
  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()`.

Install

• npm install viewport-dimensions npm
• yarn add viewport-dimensions yarn
• pnpm add viewport-dimensions pnpm

Imports

• viewport
  wrong:

  import viewport from 'viewport-dimensions'; // Incorrect package name and ESM syntax
  import { viewport } from 'viewport'; // Not a named export, common mistake

  correct:

  const viewport = require('viewport');

  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.
• width
  wrong:

  import { width } from 'viewport'; // 'width' is a method on the default export, not a direct named export

  correct:

  const viewport = require('viewport');
  const currentWidth = viewport.width();

  Access methods like `width()` and `height()` via the `viewport` object returned by `require()`.
• height
  wrong:

  import { height } from 'viewport'; // 'height' is a method on the default export, not a direct named export

  correct:

  const viewport = require('viewport');
  const currentHeight = viewport.height();

  Access methods like `height()` and `min()` via the `viewport` object returned by `require()`.

Quickstart

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()`.

// This code should be run in a browser environment or with a CommonJS-compatible runtime.

// 1. Install the package: npm install viewport-dimensions
// 2. Use require() to import it.
const viewport = require('viewport');

console.log('Initial Viewport State:');
console.log('Width:', viewport.width());
console.log('Height:', viewport.height());
console.log('Max Dimension (vmin):', viewport.max());
console.log('Min Dimension (vmax):', viewport.min());

// To simulate a resize event and update dimensions
// In a real browser, you would attach this to window.onresize
function updateAndLogDimensions() {
  viewport.setDimensions(); // Manually update internal dimension references
  console.log('\nViewport dimensions updated:');
  console.log('New Width:', viewport.width());
  console.log('New Height:', viewport.height());
}

// Call it once for demonstration, or attach to window.resize in a browser
// window.addEventListener('resize', updateAndLogDimensions);
updateAndLogDimensions();

// Example of retrieving a dimension again after potential changes
console.log('\nFinal Width (example):', viewport.width());