use-device-hook

useDeviceHook

A simple and powerful React hook that detects various properties of the user's device, including the device type, operating system, screen resolution, network status, browser, preferred language, color scheme, and more. Perfect for responsive design and creating personalized user experiences.

Features

• Detects the device type (mobile, tablet, or desktop).
• Detects the operating system (Windows, macOS, Android, iOS, Linux, etc.).
• Detects the screen resolution and updates it dynamically on window resize.
• Detects the network status (online or offline).
• Detects the browser (Chrome, Firefox, Safari, Edge).
• Detects the preferred language of the user.
• Detects the color scheme preference (light or dark mode).
• Detects the timezone based on the user's locale.

Installation

To install the useDeviceHook package, run the following command:

npm install use-device-hook

or

yarn add use-device-hook

Usage

import React from "react";
import { useDevice } from "use-device-hook";

function Mycomponent() {
  const { device, os, screenResolution, isOnline, browser, language, theme, timezone } = useDevice();

  return (
    <div>
      <p>Device: {device}</p>
      <p>OS: {os}</p>
      <p>Screen Resolution: {screenResolution.width} x {screenResolution.height}</p>
      <p>Network Status: {isOnline ? "Online" : "Offline"}</p>
      <p>Browser: {browser}</p>
      <p>Language: {language}</p>
      <p>Theme: {theme}</p>
      <p>Timezone: {timezone}</p>
    </div>
  );
}

export default Mycomponent;

How It Works

The useDevice hook returns an object containing the following values:

• device: The type of device (e.g., "mobile", "tablet", "desktop").
• os: The operating system of the user (e.g., "Windows", "macOS", "Android", "iOS", "Linux").
• screenResolution: An object with the width and height of the screen (e.g., { width: 1920, height: 1080 }).
• isOnline: A boolean indicating whether the user is currently online.
• browser: The browser the user is using (e.g., "Chrome", "Firefox", "Safari", "Edge").
• language: The preferred language of the user (e.g., "en-US").
• theme: The preferred color scheme of the user (either "light" or "dark").
• timezone: The user's timezone (e.g., "America/New_York").

Dynamic Screen Resolution

The hook also listens for window resize events and dynamically updates the screen resolution, so you can always have the most up-to-date value for responsive design purposes.

const { screenResolution } = useDevice();
console.log(`Current screen resolution: ${screenResolution.width} x ${screenResolution.height}`);

Detecting Network Status

The hook detects whether the user is online or offline by listening to the online and offline events.

const { isOnline } = useDevice();
console.log(`User is currently ${isOnline ? "online" : "offline"}`);

Browser and Language Detection

The hook automatically detects the user's browser and preferred language from the navigator object.

const { browser, language } = useDevice();
console.log(`User is using ${browser} and prefers the language ${language}`);

Color Scheme Detection

The hook detects the user’s preferred color scheme (light or dark mode) and updates dynamically if the user changes their system preference.

const { theme } = useDevice();
console.log(`User prefers the ${theme} color scheme`);

Timezone Detection

The hook also detects the user's timezone based on the system's locale settings.

const { timezone } = useDevice();
console.log(`User's timezone is ${timezone}`);

API

The hook exposes the following values:

const { 
  device,       // "mobile" | "tablet" | "desktop"
  os,           // "Windows" | "macOS" | "Android" | "iOS" | "Linux" | "Unknown"
  screenResolution, // { width: number, height: number }
  isOnline,     // boolean
  browser,      // string (e.g., "Chrome", "Firefox", etc.)
  language,     // string (e.g., "en-US")
  theme,        // "light" | "dark"
  timezone      // string (e.g., "America/New_York")
} = useDevice();

License

This project is licensed under the MIT License.

Contributing

Feel free to submit issues, feature requests, and pull requests! All contributions are welcome.

Troubleshooting

If you encounter any issues or bugs with the hook, please feel free to open an issue in the GitHub repository. Make sure to check the console for any errors or warnings related to usage.