Registry / http-networking / viewport-dimensions

viewport-dimensions

library0.2.0jsnpmunverified

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.

http-networking

npm install viewport-dimensions

github ↗package ↗

INSTALL

IMPORT

SIG · VIEWPORT-DIMENSION

viewport-dimensions

http-networkingjavascriptv0.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

viewport

✓ const viewport = require('viewport');

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

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

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

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

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

height

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

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

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

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());

Debug

Known issues

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

affects: all

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

affects: all

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

affects: all

Errors

Common errors & fixes

ReferenceError: require is not defined

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')

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'

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.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

15 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/alexdunphy/viewport ↗

packagehttps://www.npmjs.com/package/viewport-dimensions ↗