usePlatform

React hook to tracked the platform of the user.

usePlatform detects the user’s device platform by parsing the user agent string via navigator.userAgent. It returns an object with a platform value ("ios", "android", or "unknown") along with helper methods: isInMiniProgram(), isInWechat(), and isiPhoneX(). For SSR, you can pass a userAgent string to enable server-side detection.

When to Use

• Rendering platform-specific UI or behavior (e.g., different scroll handling on iOS vs. Android)
• Detecting WeChat or mini-program environments for specialized integrations
• Adjusting safe-area insets or notch handling on iPhone X and newer models

Notes

• SSR-safe: Accepts an optional userAgent prop for server-side rendering. Without it, returns "unknown" as the platform on the server.
• User agent parsing: Detection relies on navigator.userAgent, which can be spoofed. Use for progressive enhancement, not security-critical decisions.
• Related hooks: See also useScreenSafeArea for safe-area inset values and useMobileLandscape for orientation detection on mobile devices.

Usage

function Demo() {
  const {platform} = usePlatform();

  return <p>platfrom: {platform}</p>;
};

API

UsePlatformProps

usePlatform

Returns

UsePlatformReturn: object that related to platform

Arguments

UsePlatformReturn

Platform

export type Platform = 'ios' | 'android' | 'unknown';