@n10l/web-device-info v0.1.2

web-device-info

• Generated using boilerplate https://github.com/hackingbay/js-package-minimal-boilerplate

Find out execution device info, e.g. if executing device has DOM available, or is mobile, tablet or desktop device. Customizable using environment variables.

If using yarn:

yarn add @n10l/web-device-info

If using npm:

npm install @n10l/web-device-info

To use in code:

• canUseDOM is a variable which is true if execution device has DOM available.

Declare import { canUseDOM } from '@n10l/web-device-info'

Then in code:

if ( canUseDOM ) {}

• isMobileScreenSize() is a function which takes optional isMobileScreenSize check breakpoint. It tells whether execution device current window size is in mobile view range or not.

Declare import { isMobileScreenSize, isTabletScreenSize, isDesktopScreenSize } from '@n10l/web-device-info'

Then in code:

if ( isMobileScreenSize(768) ) {}

• isMobileDevice() is a function which takes no argument and returns if execution device is mobile or not.

Declare import { isMobileDevice, isIosDevice } from '@n10l/web-device-info'

Then in code:

if ( isMobileDevice() ) {}

May support ES5 environment also.

Default device check conditions:

• Mobile < 768px
• >= 768px Tablet <= 1024px
• > 1024px Desktop <= 1200px
• > 1200px Large desktop
• > 1440px Extra large desktop

Customization of default using environment variables (e.g. can be set in .env files in React)

• RESPONSIVE_STRATEGY = 'mobile_first' Default value = 'desktop_first' Possible values are 'mobile_first', 'desktop_first' or 'table_first'

• LARGE_DESKTOP_BREAKPOINT = 1440

• DESKTOP_BREAKPOINT = 1200
• TABLET_BREAKPOINT = 1024
• MOBILE_BREAKPOINT = 768

Editor Configuration

• Editor of your preference. I used some VSCode specific config in .vscode folder and recommend plugins for enhanced experience.

Recommended VSCode Extensions:

• Prettier (Official) - Code formatter
• ESLint (Official) - Real time JS syntax validation

Technologies Used

• Rollup.js
• Yarn
• Babel
• Prettier + ESlint
• Jest lint setup, jest can be added