modern-client

Modern Client Environment Toolkit for Browsers.

Detect browser, operating system, device type, network status, screen information, theme preferences, language, timezone, memory usage, CPU information, performance metrics, and FPS.

Features

• 🌐 Browser Detection
• 💻 Operating System Detection
• 📱 Mobile / Tablet / Desktop Detection
• 🖥 Screen Information
• 📶 Network Information
• 🌙 Theme Detection
• 🌍 Language Detection
• 🕒 Timezone Detection
• 🧠 Memory Information
• ⚙️ CPU Information
• 📊 Performance Metrics
• 🎮 FPS Monitor
• ⚡ SSR Safe
• 📦 Zero Dependencies
• 🧩 TypeScript Ready

Installation

npm

npm install modern-client

pnpm

pnpm add modern-client

yarn

yarn add modern-client

Quick Start

import { client } from "modern-client";
console.log(client.info());

Browser Detection

client.browser();

Example:

{
  "name": "Chrome",
  "version": "136.0.0",
  "userAgent": "Mozilla/5.0 ..."
}

Operating System Detection

client.os();

Example:

{
  "name": "Windows"
}

Supported:

· Windows · macOS · Linux · Android · iOS

Device Detection

client.device();

Example:

{
  "type": "mobile",
  "touch": true,
  "cookies": true,
  "platform": "iPhone"
}

Device Helpers

client.isMobile();
client.isTablet();
client.isDesktop();

Example:

if (client.isMobile()) {
  console.log("Mobile device");
}

Screen Information

client.screen();

Example:

{
  "width": 430,
  "height": 932,
  "availWidth": 430,
  "availHeight": 932,
  "pixelRatio": 3,
  "colorDepth": 24,
  "orientation": "portrait"
}

Network Information

client.network();

Example:

{
  "online": true,
  "effectiveType": "4g",
  "downlink": 25,
  "rtt": 40,
  "saveData": false
}

Online Status

client.online();

Returns: true

Theme Detection

client.theme();

Example:

{
  "dark": true,
  "mode": "dark",
  "reducedMotion": false
}

Dark Mode

client.darkMode();

Returns: true

Language Detection

client.language();

Example: "en-US"

Timezone Detection

client.timezone();

Example: "Asia/Baghdad"

Memory Information

client.memory();

Example:

{
  "deviceMemory": 8
}

CPU Information

client.cpu();

Example:

{
  "cores": 8
}

Performance Metrics

client.performance();

Example:

{
  "loadTime": 850,
  "domContentLoaded": 320,
  "responseTime": 42
}

FPS Monitor

Create a monitor:

const fps = client.fps();

Start monitoring:

fps.start();

Read FPS:

fps.getFPS();

Stop monitoring:

fps.stop();

Check status:

fps.isRunning();

Complete example:

const fps = client.fps();
fps.start();
setInterval(() => {
  console.log(fps.getFPS());
}, 1000);

Full Environment Information

client.info();

Example:

{
  "browser": {...},
  "os": {...},
  "device": {...},
  "screen": {...},
  "network": {...},
  "theme": {...},
  "language": "en-US",
  "timezone": "Asia/Baghdad",
  "memory": {
    "deviceMemory": 8
  },
  "cpu": {
    "cores": 8
  },
  "performance": {
    "loadTime": 850
  }
}

React Example

import { client } from "modern-client";

export default function App() {
  return (
    <pre>
      {JSON.stringify(client.info(), null, 2)}
    </pre>
  );
}

Next.js Example

"use client";
import { client } from "modern-client";

export default function Page() {
  return (
    <div>
      {client.browser()?.name}
    </div>
  );
}

SSR Safety

modern-client is SSR-safe.

When used in Node.js, Next.js Server Components, or other server environments, browser-specific APIs return null instead of throwing errors.

Example:

client.browser(); // Server Output: null

API Reference

Client Methods

| Method | Description | |--------|-------------| | client.browser() | Browser information | | client.os() | Operating system information | | client.device() | Device information | | client.screen() | Screen information | | client.network() | Network information | | client.theme() | Theme information | | client.language() | Browser language | | client.timezone() | User timezone | | client.memory() | Device memory information | | client.cpu() | CPU information | | client.performance() | Performance metrics | | client.fps() | FPS monitor | | client.info() | Full environment report |

Detection Methods

| Method | Description | |--------|-------------| | client.isMobile() | Mobile detection | | client.isTablet() | Tablet detection | | client.isDesktop() | Desktop detection | | client.online() | Online status | | client.darkMode() | Dark mode detection |

Browser Compatibility

| Browser | Supported | |---------|-----------| | Chrome | ✅ | | Firefox | ✅ | | Safari | ✅ | | Edge | ✅ |

License

CC0 1.0 Universal