@lorndev/viewport v1.0.1

This package provide a viewport utility to observe an trigger change.

Install

To install package, run npm install @lorndev/viewport.

JS

import { Viewport } from '@lorndev/viewport/Viewport';

const viewport = new Viewport();

SCSS

Import in your local manifest if you use a custom distribution or import in the too of your main SCSS file.

// install @lorndev/sass-assets package dependency
@import '~@lorndev/sass-assets/sass/manifest';

// Import your local manifest here to change any variables from previous manifest ($md, $sm etc)
// @import 'local_manifest';

// install viewport sass
@import '~@lorndev/viewport/viewport';

Change default breakpoints

Default breakpoints are xs,sm,md,lg. You can change it. For example, if you use a new mixins and breakpoint to trigger a XL width.

JS

// Note smaller to biggest width is important
const breakpoints = ['xs','sm','md','lg','xl'];
const viewport = new Viewport(breakpoints);

SCSS

html::before {
    display: none;
    content: 'xs';
    @include media-screen-sm { content: 'sm' };
    @include media-screen-md { content: 'md' };
    @include media-screen-lg { content: 'lg' };
    @include media-screen-xl { content: 'xl' };
}

Methods

  /**
   * @return {string} Current viewport if is set in html before pseudo element
   */
  getViewport() {}

  /**
   * @return {boolean} with true when the current width > viewport width in param
   * @param {string} viewport value wich included in vk_viewport.values array
   */
  isBiggerThan(viewport) {}

  /**
   * @return {boolean} with true when the current width === viewport width in param
   * @param {string} viewport value wich included in vk_viewport.values array
   */
  isEqualTo(viewport) {}

  /**
   * @return {boolean} Boolean with true when the current width < viewport width in param
   * @param {string} viewport value wich included in vk_viewport.values array
   */
  isSmallerThan(viewport) {}

  /**
   * Provide an observer to viewport change
   * @param {Function} onChange must be a function which call when viewport change.
   * @param {number} intervalCheck optional. Set the interval for checking viewport.
   */
  viewportObserver(onChange,intervalCheck = 300) {};