viewportdetector

Viewport Detector built with Bootstrap in mind.

Usage no npm install needed!

<script type="module">
  import viewportdetector from 'https://cdn.skypack.dev/viewportdetector';
</script>

README

ViewportDetector

A micro-lib for responsive design with JS that pairs very well with bootstrap and React. This was built to solve a very particular problem, switch component state based on the viewport width (I am also a huge fan of inline styles via React).

Getting Started

npm i --save viewportdetector

Thats it!

API Docs


Using Viewport Class

To get started you will need to instantiate a Viewport object OR you directly import an instantiated ViewportDefault object.

import Viewport, { ViewportDefault } from './foo/utils/Viewport/Viewport'

// Viewport => the class
// ViewportDefault => instantiated with default settings

Configuration

There are base configurations that are included by default with the Viewport library. To use these defaults just import the ViewportDefault sub-module. You can also create a custom configuration file (object) and pass it when you instantiate the new object.

Defaults

Phone => max-width: 544px

Tablet => max-width: 768px & min-width: 545px

Desktop => max-width: 992px & min-width: 769px

LargeDesktop => min-width: 1200px

Mobile => max-width: 768px

Custom

You can use the _config.js file as a template for how to create a custom object. It must include:

key value-type default
phoneMax number 544
tabletMin number 545
tabletMax number 768
desktopMin number 769
desktopMax number 992
largeDesktopMin number 993
mobileMax bool 768
isEm bool false
base number 16

Methods

isPhone

Detects if is a phone based on configuration settings, returns a boolean

ViewportDefault.isPhone()

// returns bool

isTablet

Detects if is a tablet based on configuration settings, returns a boolean

ViewportDefault.isTablet()

// returns bool

isDesktop

Detects if is a desktop based on configuration settings

ViewportDefault.isDesktop()

// returns bool

isLargeDesktop

Detects if is a large desktop based on configuration settings

ViewportDefault.isLargeDesktop()

// returns bool

isMobile

Detects if is a mobile based on configuration settings, returns a boolean

ViewportDefault.isMobile()

// returns bool