useUser

The useUser hook returns session-stable user information. These values are set once at initialization and do not change during the session.

Basic usage

import { useUser } from "@usefractal/frac/web";

function UserInfo() {
  const { locale, userAgent } = useUser();

  return (
    <div>
      <p>Locale: {locale}</p>
      <p>Device: {userAgent.device.type}</p>
      <p>Touch: {userAgent.capabilities.touch ? "Yes" : "No"}</p>
    </div>
  );
}

Returns

type UserState = {
  locale: string;
  userAgent: UserAgent;
};

type UserAgent = {
  device: {
    type: "mobile" | "tablet" | "desktop" | "unknown";
  };
  capabilities: {
    hover: boolean;
    touch: boolean;
  };
};

locale

The user’s locale string in BCP 47 format (e.g., "en-US", "fr-FR", "ja-JP").

userAgent

Information about the user’s device and its capabilities.

userAgent.device.type

The type of device the user is on:

• mobile - Mobile phone
• tablet - Tablet device
• desktop - Desktop or laptop computer
• unknown - Unable to determine device type

userAgent.capabilities.hover

Whether the device supports hover interactions (typically true for desktop, false for touch-only devices).

userAgent.capabilities.touch

Whether the device supports touch interactions.

Examples

Localized Greeting

import { useUser } from "@usefractal/frac/web";

function LocalizedGreeting() {
  const { locale } = useUser();

  const greetings: Record<string, string> = {
    en: "Hello!",
    fr: "Bonjour!",
    es: "Hola!",
    de: "Hallo!",
    ja: "こんにちは!",
  };

  const language = locale.split("-")[0];
  const greeting = greetings[language] || greetings.en;

  return <h1>{greeting}</h1>;
}

Date Formatting

import { useUser } from "@usefractal/frac/web";

function LocalizedDate({ date }: { date: Date }) {
  const { locale } = useUser();

  const formattedDate = new Intl.DateTimeFormat(locale, {
    dateStyle: "full",
    timeStyle: "short",
  }).format(date);

  return <time dateTime={date.toISOString()}>{formattedDate}</time>;
}

Number and Currency Formatting

import { useUser } from "@usefractal/frac/web";

function PriceDisplay({ amount, currency }: { amount: number; currency: string }) {
  const { locale } = useUser();

  const formattedPrice = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
  }).format(amount);

  return <span className="price">{formattedPrice}</span>;
}

Responsive Component

import { useUser } from "@usefractal/frac/web";

function ResponsiveLayout({ children }: { children: React.ReactNode }) {
  const { userAgent } = useUser();

  const layoutClass = {
    mobile: "layout-compact",
    tablet: "layout-medium",
    desktop: "layout-full",
    unknown: "layout-full",
  }[userAgent.device.type];

  return <div className={layoutClass}>{children}</div>;
}

Touch-Friendly Controls

import { useUser } from "@usefractal/frac/web";

function Slider({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  const { userAgent } = useUser();

  // Use larger touch targets on touch devices
  const thumbSize = userAgent.capabilities.touch ? 44 : 20;

  return (
    <input
      type="range"
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      style={{
        height: thumbSize,
        cursor: userAgent.capabilities.hover ? "pointer" : "default",
      }}
    />
  );
}