Platform Detection

A lightweight utility function to detect browser and operating system.

Installation

This can be used in client-side components only, as it requires access to the window object.

npx shadcn@latest add "https://reusables.vercel.app/r/platform-detector"

Usage

import { platform } from "@/lib/platform-detector"
 
// Basic OS checks
if (platform.os.ios) {
  // iOS specific code
}
 
// Browser checks
if (platform.browser.chrome) {
  // Chrome specific code
}
 
// Get platform names
console.log(platform.browser.name) // 'chrome', 'firefox', 'safari', 'edge'
console.log(platform.os.name) // 'ios', 'android', 'windows', 'macos'

const HeaderTailwind = () => {
  return (
    <header
      className={`
      bg-white
      ${platform.os.ios ? "p-10" : "p-5"}
    `}
    >
      <h1>My App</h1>
    </header>
  );
};

Last updated on

Previous

Time Ago

Next

Permission

On this page

Installation Usage