Viewstat NPM | npm.io

viewstat is a frontend-only JavaScript library that provides various tools to interact with CSS media queries and the viewport. It's features include:

Polyfills for matchMedia and requestAnimationFrame.
Screen/Viewport information, such as reliable width, height and devicePixelRatio detection as well as screen parameters like refresh rate and color depth.
Media query tools to check support for individual rules, units and to determine the current values of media queries such as width and resolution.

Support

Chome 10+ (tested)
Edge 12+
Firefox 3.5+ (tested)
Opera 10+
IE 9+ (tested)

Installation

Install the package using npm or yarn:

npm i viewstat@latest

yarn add viewstat@latest

To import from JavaScript:

// import the package as a bundle
import * as viewstat from "viewstat";

console.log(viewstat.VERSION);

Types and UMD exports are also available.

Although not recommended, the library can also be loaded directly into a web page via a CDN link:

<script type="text/javascript" src="https://unpkg.com/viewstat@latest/build/viewstat.umd.min.cjs" defer></script>

Note that this library must be loaded after the body element.

Examples

Get the current screen's refresh rate:

import { screen } from "viewstat";

const refreshRate = await screen.getRefreshRate();

Test support for the dppx unit in resolution media queries:

import { media } from "viewstat";

const supportsResolutionWithDPPX = media.supportsRangedMediaUnit("resolution", "dppx");

Check compatibility of requestAnimationFrame

import { getCompatInfo } from "viewstat";

const { name, supported } = getCompatInfo("requestAnimationFrame");
// e.g.
// supported: true
// name: "webkitRequestAnimationFrame"

Documentation

Documentation is available here. Alternatively, it can be built directly from source.

Development & Contributing

Contributing to this project is strongly encouraged as I currently have little time to continue active development.

Setup

Development on this project requires Git and npm. Download the repository and install the dependencies:

git clone https://github.com/solarunes/viewstat.js viewstat
cd viewstat
npm install

Development Server

Run a local development server. This will provide a local build in the dev directoy. HMR and live reload are supported by default.

npm run dev

viewstat v1.1.1