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