usePlatform

A React hook that provides comprehensive platform and browser detection information.

Installation

npm install @plenty-hooks/use-platform

Add Source Code

npx @plenty-hooks/cli use-platform

Using this command will add the source code of the hook directly to your project.

Options:

• --path or -p: Specify the directory where the hook file should be saved
• --kebab-case or -k: Use kebab-case for the output filename (e.g., use-document-title.ts). By default, the filename uses camelCase (e.g., useDocumentTitle.ts)

Note: By adding the source code of the hook directly to your project, you won't be able to install further updates automatically. You are on your own for maintaining and updating the code.

Showcase

import usePlatform from '@plenty-hooks/use-platform';

function ResponsiveComponent() {
  const platform = usePlatform();

  if (!platform.isBrowser) {
    return <div>Server-side rendering detected</div>;
  }

  return (
    <div>
      {platform.isMobile && <div>Mobile-optimized content</div>}

      {platform.isDesktop && <div>Desktop-optimized content</div>}

      {platform.isSafari && <div>Safari-specific features enabled</div>}
    </div>
  );
}

API

usePlatform()

Returns an object containing platform and browser detection flags. This hook takes no parameters and returns the same platform information across all calls (the detection runs once on initialization).

Returns

An object containing:

• isBrowser: boolean - Whether the code is running in a browser environment (false during SSR)
• isEdge: boolean - Whether the current browser is Microsoft Edge
• isTrident: boolean - Whether the current rendering engine is Microsoft Trident (Internet Explorer)
• isBlink: boolean - Whether the current rendering engine is Blink (Chrome, Opera, etc.)
• isWebkit: boolean - Whether the current rendering engine is WebKit (Safari, etc.)
• isIos: boolean - Whether the current platform is Apple iOS
• isFirefox: boolean - Whether the current browser is Firefox
• isAndroid: boolean - Whether the current platform is Android
• isSafari: boolean - Whether the current browser is Safari
• isMobile: boolean - Whether the current platform is a mobile device (iOS or Android)
• isDesktop: boolean - Whether the current platform is a desktop device (not iOS or Android)

Server-Side Rendering (SSR)

During server-side rendering (when window is undefined), all platform detection flags will be false, with only isBrowser being explicitly false to indicate SSR mode. This ensures safe usage in SSR frameworks like Next.js, Remix, or Gatsby.

const platform = usePlatform();

if (!platform.isBrowser) {
  // This code runs during SSR
  return <ServerSideComponent />;
}

// This code runs in the browser
return <ClientSideComponent />;

Types

interface Platform {
  /** Whether the code is running in a browser environment */
  isBrowser: boolean;
  /** Whether the current browser is Microsoft Edge */
  isEdge: boolean;
  /** Whether the current rendering engine is Microsoft Trident (Internet Explorer) */
  isTrident: boolean;
  /** Whether the current rendering engine is Blink (Chrome, Opera, etc.) */
  isBlink: boolean;
  /** Whether the current rendering engine is WebKit (Safari, etc.) */
  isWebkit: boolean;
  /** Whether the current platform is Apple iOS */
  isIos: boolean;
  /** Whether the current browser is Firefox */
  isFirefox: boolean;
  /** Whether the current platform is Android */
  isAndroid: boolean;
  /** Whether the current browser is Safari */
  isSafari: boolean;
  /** Whether the current platform is a mobile device (iOS or Android) */
  isMobile: boolean;
  /** Whether the current platform is a desktop device */
  isDesktop: boolean;
}

Implementation Notes

This hook is based on the Angular CDK Platform detection implementation.