bdd-react-device-hooks

Lightweight React hooks for detecting device type (mobile, tablet, desktop) based on the browser's user agent string.

✨ Features

• 🔍 Detect device type at runtime
• ✅ Simple and composable hooks
• 💡 Useful for conditional rendering in responsive apps
• 📦 Zero dependencies (only react and typescript)

📦 Installation

npm install bdd-react-device-hooks
# or
pnpm add bdd-react-device-hooks
# or
yarn add bdd-react-device-hooks

🚀 Usage

Basic Usage

import { useDeviceType } from 'bdd-react-device-hooks';

const MyComponent = () => {
  const { device, isMobile, isTablet, isDesktop } = useDeviceType();

  return (
    <div>
      <p>You are using a <strong>{device}</strong> device.</p>
      {isMobile && <p>This is optimized for mobile.</p>}
    </div>
  );
};

Direct use of the lower-level hook

import { useDeviceDetector } from 'bdd-react-device-hooks';

const MyComponent = () => {
  const device = useDeviceDetector(); // returns "mobile", "tablet", or "desktop"

  return <p>Device: {device}</p>;
};

🧠 API

| Hook | Description | |:-|:-| | useDeviceDetector() | Returns "mobile", "tablet", or "desktop" | | useDeviceType() | Returns { device, isMobile, isTablet, isDesktop } |

🛠️ Build

npm run build

This uses tsup to generate dist/ with ESM, CJS, and .d.ts outputs.

📄 License

MIT © bdd-wisnu