useUser

Your view runs for users on different devices, in different locales, and under the theme they picked in the host. useUser reports the user’s locale, theme, and device capabilities, so the view can format values, match the host’s palette, and size controls for them.

Example

The carousel follows the host theme, formats prices in the host locale, and adapts its controls to the device: a touch device gets larger tap targets, and hover styles apply only when the device reports hover.

import { useUser } from "skybridge/web";

function Carousel({ products }: { products: Product[] }) {
  const { locale, theme, userAgent } = useUser();
  const isMobile = userAgent.device.type === "mobile";
  const canHover = userAgent.capabilities.hover;
  const isTouch = userAgent.capabilities.touch;

  const formatPrice = (amount: number) => {
    return new Intl.NumberFormat(locale, {
      style: "currency",
      currency: "USD",
    }).format(amount);
  };

  return (
    <div className={`${isMobile ? "grid-mobile" : "grid-desktop"} ${theme}`}>
      {products.map((product) => (
        <article
          key={product.id}
          className={canHover ? "card card-hoverable" : "card"}
        >
          <img src={product.image} alt={product.name} />
          <p>{product.name}</p>
          <p>{formatPrice(product.price)}</p>
          <button className={isTouch ? "buy buy-large" : "buy"}>
            Add to cart
          </button>
        </article>
      ))}
    </div>
  );
}

Returns

`locale`

locale: string;

The user’s language and region, canonical BCP 47. The hook canonicalizes what the host reports (underscores to hyphens, casing corrected, subtags preserved) and falls back to "en-US" when the value is not a valid locale. It is safe to pass straight to Intl APIs.

`theme`

theme: "light" | "dark";

The host’s active color theme. Mirror it in the view’s styling for a native feel. It updates when the user toggles the host theme.

`userAgent`

userAgent: UserAgent;

The host’s device class and input capabilities.

type UserAgent = {
  device: {
    // "unknown" when the host reports no device class
    type: "mobile" | "tablet" | "desktop" | "unknown";
  };
  capabilities: {
    hover: boolean; // device supports hover interactions
    touch: boolean; // device supports touch input
  };
};

useViewport

Read the available height and safe-area insets

useDisplayMode

Read and request the view’s display mode

Design for the Host

Adapt the view to the user’s device and locale

Server

Auth

Identity Providers

Hooks

Utilities

Types

Low-level

Example

Returns

`locale`

`theme`

`userAgent`

useViewport

useDisplayMode

Design for the Host

​Example

​Returns

​locale

​theme

​userAgent

useViewport

useDisplayMode

Design for the Host

Example

Returns

`locale`

`theme`

`userAgent`