@superherocheesecake/next-resize-manager

next-resize-manager

Global module that caches the browser diminsions and triggers resize events.

NPM installation

npm i --save @superherocheesecake/next-resize-manager

Import the module

import { resizeManager } from '@superherocheesecake/next-resize-manager';

Events

Listening to the events

resizeManager.addEventListener('resize', this._resizeHandler);
resizeManager.addEventListener('resize:complete', this._resizeCompleteHandler);

Properties

Get viewport dimensions

const viewportWidth = resizeManager.viewportWidth;
const viewportHeight = resizeManager.viewportHeight;

Get document dimensions

const documentWidth = resizeManager.documentWidth;
const documentHeight = resizeManager.documentHeight;

Get and set the remBase

// get
const remBase = resizeManager.remBase;

// set
resizeManager.remBase = [int];

Methods

Use rem

If no base is given, it will ue the current remBase

resizeManager.rem(size [, base]);

Force the value to update

resizeManager.updateViewportDimensions();
resizeManager.updateDocumentDimensions();
resizeManager.updateDocumentFontSize();