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