@versini/ui-utilities

A collection of utility functions for device detection and performance optimization.

This package provides lightweight utility functions commonly needed when building UI components, including device detection, viewport analysis, PWA mode detection, and function debouncing.

Table of Contents

• Features
• Installation
• Usage
• API Reference

Features

• 📱 Device Detection: Detect mobile devices, tablets, iPhones, and iPads
• 🚀 PWA Support: Detect if the app is running in standalone PWA mode
• ⚡ Performance: Debounce utility for optimizing expensive function calls
• 🔧 TypeScript: Fully typed with comprehensive type definitions
• 🌲 Tree-shakeable: Import only the utilities you need
• 🪶 Lightweight: Minimal footprint with no dependencies

Installation

npm install @versini/ui-utilities

Usage

import {
  debounce,
  isProbablyMobile,
  isProbablyTablet,
  isProbablyiPhone,
  isProbablyiPad,
  isPWAMode
} from "@versini/ui-utilities";

API Reference

debounce

Creates a debounced function that delays invoking the provided function until after the specified wait time has elapsed since the last time the debounced function was invoked.

const debouncedFn = debounce(func: (...args: any[]) => void, wait: number)

Parameters:

• func - The function to debounce
• wait - The number of milliseconds to delay

Returns: A new debounced function

Example:

const handleResize = debounce(() => {
  console.log("Window resized");
}, 300);

window.addEventListener("resize", handleResize);

isProbablyMobile

Determines if the current viewport width suggests a mobile device. Uses a width threshold of 403 pixels.

const isMobile = isProbablyMobile(): boolean

Returns: true if the viewport width is less than 403 pixels

Example:

if (isProbablyMobile()) {
  // Render mobile-specific UI
}

isProbablyTablet

Determines if the current viewport width suggests a tablet device. Uses a width range between 403 and 1220 pixels.

const isTablet = isProbablyTablet(): boolean

Returns: true if the viewport width is between 403 and 1220 pixels (inclusive)

Example:

if (isProbablyTablet()) {
  // Render tablet-specific UI
}

isProbablyiPhone

Attempts to detect if the current device is likely an iPhone. Uses a combination of platform detection, user agent analysis, screen size, and touch capability checks.

const isiPhone = isProbablyiPhone(): boolean

Returns: true if the device is likely an iPhone

Example:

if (isProbablyiPhone()) {
  // Apply iPhone-specific behavior
}

isProbablyiPad

Attempts to detect if the current device is likely an iPad. Uses a combination of platform detection, user agent analysis, screen size, and touch capability checks.

const isiPad = isProbablyiPad(): boolean

Returns: true if the device is likely an iPad

Example:

if (isProbablyiPad()) {
  // Apply iPad-specific behavior
}

isPWAMode

Detects if the app is running in standalone/PWA mode. Checks for both the standard display-mode media query and the iOS-specific standalone property.

const isPWA = isPWAMode(): boolean

Returns: true if the app is running as a standalone PWA

Example:

if (isPWAMode()) {
  // Hide browser-specific UI elements
}