# viewport-details

> Get viewport information

Latest version **3.0.4** (published 2022-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install viewport-details
pnpm add viewport-details
yarn add viewport-details
bun add viewport-details
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2022-10-13 |
| First published | 2017-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 178.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ben Meyrick |
| Maintainers | bameyrick |
| Keywords | viewport, details, vh |

## Links

- npm: https://www.npmjs.com/package/viewport-details
- Repository: https://github.com/bameyrick/viewport-details
- Homepage: https://github.com/bameyrick/viewport-details#readme
- Issues: https://github.com/bameyrick/viewport-details/issues
- npm.io page: https://npm.io/package/viewport-details

## Recent versions

- 3.0.4 (latest) — 2022-10-13
- 3.0.3 — 2022-06-10
- 3.0.2 — 2022-03-15
- 3.0.1 — 2021-08-11
- 3.0.0 — 2021-08-11
- 2.0.0 — 2021-04-16
- 1.5.0 — 2018-08-08
- 1.4.0 — 2018-08-06
- 1.3.1 — 2018-08-02
- 1.3.0 — 2018-07-20
- 1.2.0 — 2018-07-20
- 1.1.0 — 2018-07-20
- 1.0.1 — 2017-11-21
- 1.0.0 — 2017-11-17

## README

# Viewport details

Get viewport details

[![GitHub release](https://img.shields.io/github/release/bameyrick/viewport-details.svg)](https://github.com/bameyrick/viewport-details/releases)
[![Build Status](https://travis-ci.com/bameyrick/viewport-details.svg?branch=master)](https://travis-ci.com/bameyrick/viewport-details)
[![codecov](https://codecov.io/gh/bameyrick/viewport-details/branch/master/graph/badge.svg)](https://codecov.io/gh/bameyrick/viewport-details)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/7f4bdaa3b82d42a9b96a6f17c80b32bb)](https://www.codacy.com/manual/bameyrick/viewport-details)

## Install

You can install via npm or yarn

### npm

```bash
npm install --save viewport-details
```

### yarn

```bash
yarn add viewport-details
```

## Usage

### Importing

You can import using ES6 imports

```javascript
import { getViewportDetails } from 'viewport-details';
```

### Getting details

```javascript
console.log(getViewportDetails());
```

Will return:

```typescript
interface ViewportDetails {
  /**
   * The width of the viewport
   */
  width: number;

  /**
   * The height of the viewport
   */
  height: number;

  /**
   * The hight of the viewport if the browser controlls have collapsed (e.g. in iOS Safari)
   */
  heightCollapsedControls: number;

  /**
   * The scroll x position of the viewport
   */
  scrollX: number;

  /**
   * The scroll y position of the viewport
   */
  scrollY: number;

  /**
   * Whether the viewport has resized since the last time getViewportDetails was called
   */
  resized: boolean;

  /**
   * Whether the viewport scrolled since the last time getViewportDetails was called
   */
  scrolled: boolean;

  /**
   * The direction in which the user is scrolling on the x axis. (This will not update until getViewportDetails has been called once)
   */
  scrollDirectionX: ScrollDirectionX;

  /**
   * The direction in which the user is scrolling on the y axis. (This will not update until getViewportDetails has been called once)
   */
  scrollDirectionY: ScrollDirectionY;

  /**
   * The previous getViewportDetails result
   */
  previous?: ViewportDetails;

  /**
   * Whether any of the values have changes since the last time getViewport details was called
   */
  changed?: boolean;
}
```

#### Note

`heightCollapsedControls` is the height that the viewport will be once the user has scrolled and the browser controlls shrink, such as on iOS Safari.

`resized` represents whether the viewport resized since the previous animation frame.

`scrolled` represents whether the viewport scrolled since the previous animation frame.

`scrollDirectionX` represents a the direction of scroll. 0 means no movement, 1 means scrolling to the right, and -1 means scrolling to the left.

If you're using TypeScript an enum (`ScrollDirectionX`) is also available, with the options None, Right, and Left.

`scrollDirectionY` represents a the direction of scroll. 0 means no movement, 1 means scrolling down, and -1 means scrolling up.

If you're using TypeScript an enum (`ScrollDirectionY`) is also available, with the options None, Up, and Down.

---
_Source: https://npm.io/package/viewport-details · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._